HTML & CSS：如何创建四个相同大小的标签，填充 100% 宽度？

Posted 2023-04-13

【中文标题】HTML & CSS：如何创建四个相同大小的标签，填充 100% 宽度？

【英文标题】：HTML & CSS: How to create four equal size tabs that fill 100% width?

【发布时间】：2012-08-14 16:54:36

【问题描述】：

我正在尝试为我的网站创建一个导航面板。我希望它包括：

四个相同大小的选项卡，每个选项卡都以文本为中心。 它们应该填满整个页面宽度。

我真的希望设计灵活且对浏览器友好。我尝试了各种浮动技术，但我无法让它发挥作用。我希望你能帮助我！

谢谢。

【参考方案1】：

HTML

编辑：现在是 2015 年，html5 已经存在了一段时间；以下代码应位于 nav 元素 (html5doctor) 中，并在其上带有地标 ARIA 属性 role="navigation"（并且 99.9% 的时间在任何给定页面中都是唯一的）。

导航面板应使用无序列表的链接：

<ul id="nav">
  <li><a href="#">One</a></li>
  <li><a href="#"> Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth and last, so large that... worst case</a></li>
</ul>

CSS

EDIT2：现在是 2017 年，只需使用 Flexbox ?（带或不带 flex-wrap: wrap）

inline-block 很有用，但有一个缺点：必须仔细管理两个元素之间的空白。无论是在 HTML5 中删除或不删除 </li> 还是在下一行开头的 </li> 像 </li><li>next item 或其他技巧一样卡住，你仍然需要做一些事情，否则它会在 2 个元素之间创建一个 ~4px 的间隙。

如果总数不是 4 的倍数，25% + 25% + 25% + 25% 并不等于所有浏览器的 100%。每个浏览器都有自己的舍入方法。

如果您希望元素的总宽度为 100% 且宽度相等，另一种方法是使用 display: table（和 table-cell）和 @987654335 @ 强制浏览器使用 other 表格算法，该算法不会尝试使单元格宽度适应内容，而是尽可能尊重设计者/开发人员想要的宽度。

ul 
  margin: 0;
  padding: 0;

li 
  list-style-type: none;

#nav 
  display: table;
  table-layout: fixed;
  text-align: center;

#nav li 
  display: table-cell;
  width: 25%;
  padding-right: 1px;
  height: auto;
  vertical-align: bottom;

#nav a 
  display: block;
  min-height: 100%;
  padding: 4px 10px;
  background-color: #222;
  color: white;
  border-radius: 6px 6px 0 0;

小提琴

http://jsfiddle.net/PhilippeVay/aHCy3/1/ 编辑：http://jsfiddle.net/PhilippeVay/aHCy3/2/ 使用另一种方法在每个选项卡之间留出空间，由我的同事提供。

【讨论】：

谢谢。为什么最后两个 没有 class="tab"？

糟糕，事实上我忘了从它们各自的列表项中删除另外两个.tab。由于ul 上有一个id #nav，因此不再需要这个类，li 使用选择器#nav li 进行样式设置。小提琴、链接和 HTML 代码已编辑。

另一种在每个选项卡之间留出空间的方法：查看新的 fiddle (with border-spacing)

你太棒了，我已经卡了一段时间了。

【参考方案2】：

你不需要花车。只需将宽度设置为 25%，或略小于 25%。如果您在块级元素上使用它，请设置display: inline-block。这适用于所有浏览器尺寸，并响应窗口大小调整。

HTML

<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​

CSS

body, html 
    width: 100%;
    padding: 0;
    margin: 0;

.nav 
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
​​

Live demo

【讨论】：

+1，但您可能想要更新演示，因为当前版本仍有width: 25%。

完成。还添加了text-align:center，因为 OP 希望文本居中。

为什么是 24% 而不是 25%？添加 outline: 1px dashed darkred; 表明宽度不是 100%。 24.5% 会更好（但仍然不完美，出于同样的原因）

你不应该把 4 个 div 放在另一个“包装”div 中，然后居中吗？

“导航面板”不应使用div 元素，但应在 HTML5 中使用 nav>ul>li*4>a（在 ZenCoding 表示法中）（与 HTML4.01/XHTML1 中没有导航相同。 0)

【参考方案3】：

css：

.tab 
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
​

html:

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​

jsfiddle：http://jsfiddle.net/zP7Xh/6/

【讨论】：

如果你浮动它们，你为什么需要inline-block？它还需要两个带前缀的 box-sizing 属性和父级的 clearfix。

框的大小是为了显示目的，边框不会增加按钮的宽度。这个css工作正常，看看jsfiddle。

（它在我使用的浏览器中不起作用，因为我不使用 Chrome，但这只是稍后添加的供应商前缀，就像我在小提琴中所做的那样）我的观点与 @987654325 无关@ but inline-block: 删除 inline-block 它仍然有效。默认渲染为block的浮动元素已经可以了，不需要改变它们的显示。

啊，我看错了，确实不需要显示，我只在Chrome上测试过。