Question

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

相同尺寸的四个标签，每个标签中都以文本为中心。
他们应该填写整个页面宽度。

我真的希望设计灵活且适合浏览器。我尝试了各种浮动技术，但我无法让它工作。我希望你能帮助我！

谢谢。

Answer 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或其他技巧那样被删除，您仍需要做某事或者它会造成~4px的差距2个元素之间。

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

如果您希望元素的总宽度为100％且宽度相等，则另一种方法是使用 display: table （以及 table-cell ）< strong> table-layout: fixed 强制浏览器使用其他表格算法，该算法不会尝试将单元格宽度调整为内容，而是尊重设计人员所需的宽度/开发商尽可能。

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/使用另一种方法在每个标签之间留出空间，由我的同事提供。

Answer 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

Answer 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/

HTML＆amp; CSS：如何创建四个相同大小的标签，填充100％宽度？

3 个答案: