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>

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。

Answer 2

自IE8以来支持CSS2.1 table，table-cell并提升了感谢table-layout:fixed。不幸的是，它有margin等布局限制。

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

“在”fixed“布局方法下，可以渲染整个表格一旦下载并分析了第一个表行。这个可以通过“自动”布局方法加快渲染时间，但是后续单元格内容可能不适合所提供的列宽。任何具有溢出内容的单元格使用overflow属性确定是否剪辑溢出内容。“

演示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>

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的父级（我在本例中没有提到）是宽度：auto。它将无法工作。

警告＃2：你不应该在第一个之前，之后的-s和他们的父母之前有任何空格！但是在内部标签之间你需要（至少一个）空格。

警告＃3：它会在你的最后一个div之后放一个不需要的换行符。如果这对你来说是一个问题，有多种解决方案可以让它消失，但它们还不是更好。

100％水平跨浏览器菜单HTML / CSS？

3 个答案: