Question

Html span标签与左边文字水平对齐 如何实现

<div style="background-color:#1D96D4;border-bottom:10px solid #BCE774;"><br />
<div style="float:inherit">
<span style="float:right; ">
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝788型">788型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝789型">789型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝799型">799型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;font-size:18px;" target="_blank" title="凤铝50型">50型</a>
</span>
</div>
<font style="font-size:40px;line-height:60px;padding-left:20px;font-weight:bold;color:#FFFFFF;">1F</font>
<font style="font-size:20px;line-height:22px;padding-top:72px;font-weight:bold;color:#FFFFFF;"> 特价</font>
</div>

Answer 1

去掉 span 标签吧，都用div来布局就应该可以的，希望能帮到你..
<div style="background-color:#1D96D4;border-bottom:10px solid #BCE774;">
<div>
<div>
<font style="font-size:40px;line-height:60px;padding-left:20px;font-weight:bold;color:#FFFFFF;">1F</font>
<a style="font-weight:bold;color:#FFFFFF;line-height:60px;font-size:18px;">特价</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝788型">788型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝789型">789型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝799型">799型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;font-size:18px;" target="_blank" title="凤铝50型">50型</a>
</div>
</div>
</div>

Answer 2

把上面代码改成下面形式！将2个font放到第二div里面！

<div style="background-color:#1D96D4;border-bottom:10px solid #BCE774;"><br />
<div style="float:inherit">
<span style="float:right; ">
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝788型">788型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝789型">789型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;padding-right:18px;font-size:18px;" target="_blank" title="凤铝799型">799型</a>
<a href="" style="font-weight:bold;color:#FFFFFF;line-height:60px;font-size:18px;" target="_blank" title="凤铝50型">50型</a>
</span>

<font style="font-size:40px;line-height:60px;padding-left:20px;font-weight:bold;color:#FFFFFF;">1F</font>
<font style="font-size:20px;line-height:22px;padding-top:72px;font-weight:bold;color:#FFFFFF;"> 特价</font>

</div>
</div>

Answer 3

text-align：justify