100%水平的跨浏览器菜单HTML/CSS?

Question

如何制作100％水平的跨浏览器菜单HTML / CSS？

1.保持干净的HTML，使用li列表 2.无图像/ JavaScript，无表格，符合W3C标准

下面是一个“无效”示例：

/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
    text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
    display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
    display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
    display:inline;
}

并且：

<div id="nav">
    <ul>
        <li>Home <!--unfortunately it doesn't work without space after each list, 
                                                 need for some solution--></li>
        <li>Services </li><!--don't want to add style for each list separated-->
        <li>Portfolio </li>
        <li>Clients </li>
        <li>Articles </li>
        <li>Contact Us </li>
        <li id="span"></li><!--don't like to add any extra tag (like this),
                               but other way it doesn't work,
                               need for some solution-->
    </ul>
</div>

- Binyamin

---

你可能会在http://doctype.com/上获得更好的答案。 - Darin Dimitrov

在http://doctype.com/IMB上有同样的问题。 - Binyamin

Answer 1

尝试这个稍微不那么hacky的版本：

<style type="text/css">    
#nav ul {
    list-style: none;
    display: table;
    *display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: table-cell;
    *display: inline;
    width: auto;
    min-width: 100px;
    margin: 1px 0;
    padding: 2px auto;
    *padding: 2px 40px;
    border: 1px solid #999;
    text-align: center;
    white-space: nowrap;
}
</style>
<div id="nav">
    <ul>
        <li>Home</li>
        <li>Services</li>
        <li>Portfolio</li>
        <li>Clients</li>
        <li>Articles</li>
        <li>Contact Us</li>
    </ul>
</div>

问题出在IE7浏览器上。

- deep rock

---

很遗憾，它在IE7/6上无法运行。你有解决办法吗？谢谢！ - Binyamin

只有表格，不幸的是。可以使用一个小的JavaScript来根据元素数量和容器的总宽度应用比例宽度来备份它。有趣的是，试图保持IE的外观和感觉总是会导致hackiness。 - deep rock

Answer 2

CSS2.1中，table和table-cell从IE8开始得到支持，并且通过table-layout:fixed进行了渲染优化。不幸的是，它有布局限制，例如margin。

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

“在'fixed'布局方法下，一旦下载并分析了第一行表格，整个表格就可以被渲染出来。这可以加速渲染时间，但后续单元格内容可能不适合提供的列宽度。任何具有溢出内容的单元格都使用溢出属性来确定是否要裁剪溢出内容。”

演示http://jsbin.com/AgiMoxu/9/edit

<style>
ol {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  white-space: nowrap;
}
li {
  overflow: hidden;
  display: table-cell;
  padding: 10px;
  text-overflow: ellipsis;
}
</style>
<ol>
  <li>Home
  <li>Section two
  <li>Section three
  <li>Another section
  <li>A section with a longer name
  <li>Section six
  <li>This is section seven
  <li>Section 8
</ol>

- Binyamin

Answer 3

即使没有表格，也有一种解决方法。虽然不是很美观，但是可以使用。

诀窍在于，在文本块中将它们作为内联元素排序。文本块的单词将根据您的标签执行所需操作。但是，由于文本块的最后一行是左对齐的，因此您需要以换行符结束该块。

以下是未经测试的示例：

<style>
.label {
    display: inline-block;
}
</style>

<div style="display: block; width: 100%; text-align: justify"><div class="label">label1</div>
<div class="label">label2</div>
<div class="label">label3</div><br /></div>

警告 #1：如果外部 div 的父元素是 width: auto，则无法正常工作（此示例中未放置）。

警告 #2：在第一个和最后一个 -s 及其父元素之前不应有任何空格！但在内部标签之间，您需要有（至少一个）空格。

警告 #3：它会在最后一个 div 后面放置一个不必要的换行符。如果这对您造成问题，有多种解决方案可以使其消失，但它们还不是更好的。

- peterh

---

您的建议未返回预期结果，请参见http://jsbin.com/IWaKAGaY/1/edit。 - Binyamin