7

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

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

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

谢谢你。

4

3 回答 3

17

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

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

如果您希望元素的总宽度为 100% 且宽度相等，另一种方法是使用display: table(and table-cell) withtable-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/每个选项卡之间的另一种空间方法，由我的同事提供。

于 2012-08-18T15:27:46.860 回答
4

你不需要花车。只需将宽度设置为 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;
}​​

现场演示

于 2012-08-18T14:36:20.270 回答
0

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/

于 2012-08-18T14:35:16.433 回答