css - 拉伸且均匀分布的水平菜单答案

【问题标题】：css - stretched and evenly spaced horizontal menucss - 拉伸且均匀分布的水平菜单
【发布时间】：2015-03-03 14:38:56
【问题描述】：

希望你能帮帮我，我有一个横向菜单，我的问题如下：

第一个是正常的表格拉伸，第二个是我想要的：拉伸+文本之间的均匀间隙。

我通过额外的非中断空格实现了这一点，但它仅适用于固定菜单宽度，因此如果我更改菜单宽度，我必须更改 nbsp 字符的计数。有没有办法用 css 做到这一点，并且没有那些不间断的空格？

菜单点的数量和菜单宽度可以改变，所以我需要一个没有 javascript 的自动解决方案。没有单独的列设置，除非你能给我一个我可以在服务器端运行的算法。

我认为这不可能仅使用 css，但我不是 css 大师，这就是我问的原因....

<style>
    * {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
    }

    table {
        width: 400px;
    }

    td {
        border: 1px solid blue;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td><a href="#">aa</a></td>
        <td><a href="#">aaaaaaaaaaaaa</a></td>
        <td><a href="#">aaaaaaaaa</a></td>
    </tr>
</table>


<table>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">aa</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;<a href="#">aaaaaaaaaaaaa</a>&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;<a href="#">aaaaaaaaa</a>&nbsp;&nbsp;&nbsp;</td>
    </tr>
</table>

【问题讨论】：

标签： html css alignment stretch

【解决方案1】：

不确定这里的所有参数（“拉伸”不是很清楚），但是链接上的一些左右填充不是吗？因为这是一个菜单，所以我不会使用表格而是使用<ul>。如果它不是你想要的，这有很多变化：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
ul, li {margin: 0; padding: 0;}
ul {list-style: none; display: table; border-spacing: 5px; }
li {display: table-cell; background: #f7f7f7; border: 1px solid blue; }
li a {padding: 0 30px;}
</style>

</head>
<body>

<ul>
    <li><a href="#">aa</a></li>
    <li><a href="#">aaaaaaaaaaaaa</a></li>
    <li><a href="#">aaaaaaaaa</a></li>
</ul>

</body>
</html>

【讨论】：

好的，我想知道“拉伸”是否意味着菜单总是拉伸到 100% 的宽度？如果是这样，那么回到绘图板。 :-)
如果我调整窗口大小，拉伸不起作用，但如果我手动更改宽度，那么它就起作用了。我不知道为什么填充有帮助，但它是完美的！：-）谢谢！ :-)
如果你在一个巨大的水平空间中有这 3 个菜单点会略有不同，但我通常至少有 5-6 个菜单点，所以对我来说已经足够了。再次感谢！ :-)

【解决方案2】：

编辑：以下答案不适用于最新的 IE 11 版本的 Internet Explorer。它的单元格大小算法似乎与其他浏览器不同。

虽然这需要一些跨浏览器测试，但这是我一直在使用的：

http://jsfiddle.net/aaronadams/j3cEQ/

HTML：

<p>Default spacing:</p>
<ul>
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>
<p>Even spacing:</p>
<ul class="even">
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>

CSS：

ul {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 30em;
    text-align: center;
}
li {
    display: table-cell;
    margin: 0;
    padding: 0 0.125em;
    white-space: nowrap;
}
.even li {
    width: 1%;
}

到目前为止，这为我提供了一个适用于所有屏幕尺寸的菜单；在移动设备上它会缩小到屏幕宽度，在桌面上它会增长到一定大小，并且链接总是均匀分布的。

感谢这里的灵感：https://stackoverflow.com/a/16509901/802414

【讨论】：

适用于 firefox 和 chrome，但不适用于 MSIE。
@inf3rno 哪个版本？ IE8 及以下不支持 display: table-cell，但即便如此，菜单似乎仍然可以充分呈现。
MSIE 11.0.9600 为什么我不能发送简短的评论？！ :S
@inf3rno 好眼力，我可以确认它不能正常工作。它的算法似乎退回到相等的单元格大小，

【解决方案3】：

您可以设置各个列的宽度。

JSFiddle

HTML

<table>
    <tr>
        <td class="first"><a href="#">aa</a></td>
        <td class="second"><a href="#">aaaaaaaaaaaaa</a></td>
        <td class="third"><a href="#">aaaa aaaaaaaaaaaaa</a></td>
    </tr>
</table>

CSS

table {
    width: 400px;
}

td {
    border: 1px solid #d3d3d3;
    text-align: center;
}

.first {
    width: 30%;
}

.second {
    width: 45%;
}

.third {
    width: 30%;
}

【讨论】：

是的，我知道，但这不是自动的...我会编辑我的问题，请稍等。

【解决方案4】：

JSFIDDLE

您可以设置“单个列的左右填充”

HTML

<table>
    <tr>
        <td class="first"><a href="#">aa</a></td>
        <td class="second"><a href="#">aaaaaaaaaaaaa</a></td>
        <td class="third"><a href="#">aaaa aaaaaaaaaaaaa</a></td>
    </tr>
</table>

CSS

table { width: 400px; }
td { border: 1px solid #d3d3d3; text-align: center;}
.first { padding: 0 3em; }
.second { padding: 0 2em; }
.third { padding: 0 4em; }

【讨论】：

编辑了两次，现在可能很明显了。 :-)

【解决方案5】：

这可以通过 CSS 实现，通过使父元素 text-align: justify 和子元素 display:inline-block;但是，对齐文本仅在至少有 2 行时才能正常工作。伪 :after 元素用于强制增加一个额外的（非常小的）行：

#container {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 600px;
}
#container div {
  width: 150px;
  height: 125px;
  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

感谢https://css-tricks.com/equidistant-objects-with-css/ 此技术。

【讨论】：