跳至主要内容

Fixed width within display:inline

根据老板的需求修改web page中的footer的时候发现了<span>的宽度有问题,HTML的结构大致如下:

<div style="margin: 0pt 260px; width: 380px;">
    <span class="footTag">About</span>
    <span class="footTag">Partners</span>
    <span class="footTag">Advertise</span>
</div>
<div style="margin: 6px 0pt; clear: left;">
  © 2008 Company-Name
</div>


其中样式footTag指定了width,但是尝试了很久发现span的宽度无论如何也不能按照CSS的定义显示…… 但是如果换成DIV或是用 display: block 就可以。在Google了不少keyword之后终于发现了一篇相关的解释。到W3C的CSS 2.1规范里具体找了一下,果然发现:

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A computed value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a used value of '0'.

有空一定要仔细看看规范~做WEB开发的至少先将CSS、JavaScript和DOM混个脸熟,然后再研究不同browser的特性。


评论