2

每当我使用水平组件创建页面时，大多数顶级元素通常是 div，我将 display 设置为 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;}

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

4

2 回答 2

5

div 元素根本没有特殊含义。

强烈建议作者将 div 元素视为不得已的元素，因为当没有其他元素适合时。使用更合适的元素而不是 div 元素可以提高读者的可访问性和作者的可维护性。

来源

实际上，大多数网站都div大量使用 s，这很好。然而，HTML5 添加了新标签，这些标签确实有意义（甚至 HTML 4 也有可能更合适的标签，例如li,dl等）

实现显示特性 a 的是用户代理div。所有浏览器都应用默认样式（与用户代理使用的display:block方式相同）。与我看到的其他答案/评论相反，与不同，因此仅交换不会给出相同的行为。display:inlinespansinline inline-blockspansdivs

在某些情况下，将 select 的显示更改为 是完全有意义divs的inline:block。这是一个有用的行为。

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

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

于 2013-09-05T21:30:35.567 回答
1

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

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

需要注意的一点是，在 IE7 中，除非触发 hasLayout，否则 inline-block 无法按预期工作，您可以使用 zoom:1 来执行此操作。

于 2013-09-05T21:20:07.963 回答