Question

每当我创建一个带有水平分量的页面时，大多数顶级元素通常都是div，我将显示设置为inline：block。例如：

<div id='header'>
    <div class='inline_block'> stuffff </div>
    <div class='inline_block'> stuffff </div>
    <div class='inline_block'> stuffff </div>
</div>

#header{width:100%}
.inline_block{width:20%; display:inline-block;}

这总能达到我想要的效果，但感觉错误。任何人都可以为我阐明这一点吗？

Answer 1

div元素没有任何特殊含义。

强烈建议作者将div元素视为元素   最后的手段，因为没有其他元素是合适的。使用更多   适当的元素而不是div元素导致更好   读者的可访问性和作者的易维护性。

Source

实际上，大多数网站大量使用div，这很好。但是，HTML5添加了做具有意义的新标签（甚至HTML 4也有更合适的标签，例如li，dl等。）

实现div显示特征的用户代理。所有浏览器都应用默认样式display:block（与用户代理使用display:inline spans的方式相同）。与我见过的其他答案/评论相反，inline is not the same与inline-block相反，因此仅仅为spans交换divs将不会产生相同的行为。< / p>

在某些情况下，将选择divs的显示更改为inline:block是完全合理的。这是一种有用的行为。

是否有“更好”的元素？也许，但该决定应基于正确构建文档，而不是浏览器分配的默认样式。

更重要的是，确保您使用语义标记和有意义的CSS（使用类名“inline-block”不是一个好主意;如果您将相应的CSS更改为其他内容，则名称现在是错误的）。

Answer 2

使用内联块没有任何问题，但如果您使用的是内联块等类，我会质疑它。您想使用更有意义的类名，如果需要将这些类设置为内联块，那很好。在您的示例中，如果所有直接子div都是内联块，您可以这样做：

#header > div {
   display: inline-block;
   *display:inline; //IE7
   *zoom:1; //IE7
}

需要注意的一点是，在IE7中，除非触发hasLayout，否则内联块无法按预期工作，您可以使用zoom进行操作：1。

使用<div>和display：inline-block经常是不好的做法吗？</div>

2 个答案: