我希望你能帮助我，我有一个水平菜单，我的问题如下:
第一个是表格的正常拉伸(stretch)，第二个是我想要的:拉伸(stretch)+文本之间的均匀间隙。
我通过额外的不间断空格实现了这一点，但它仅适用于固定的菜单宽度，因此如果我更改菜单宽度，我必须更改 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> <a href="#">aa</a> </td>
<td> <a href="#">aaaaaaaaaaaaa</a> </td>
<td> <a href="#">aaaaaaaaa</a> </td>
</tr>
</table>
最佳答案
不确定这里的所有参数(“拉伸(stretch)”不是很清楚)，但是链接上的一些左右填充不是可以做到这一点吗？因为这是一个菜单，所以我不会使用表格，而是使用 <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>
关于html - css - 拉伸(stretch)且均匀分布的水平菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16274175/