Question

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

enter image description here

第一种是用桌子正常拉伸，第二种是我想要的：伸展+文本之间的差距。

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

menupoints的数量和菜单宽度可以改变，所以我需要一个没有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>

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

Answer 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

Answer 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%;
}

Answer 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; }

Answer 5

这可以通过使父元素text-align：justify和子元素显示来实现：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/。

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

5 个答案: