Html css-拉伸和等距水平菜单
我希望，你能帮助我，我有一个水平菜单，我的问题如下： 第一个是表格的正常拉伸，第二个是我想要的：拉伸+文本之间的偶数间隙 我用额外的不间断空格实现了这一点，但它只适用于固定的菜单宽度，因此如果我更改菜单宽度，我必须更改nbsp字符的计数。有没有什么方法可以用css实现这一点，而不需要那些不间断的空格 菜单点的计数和菜单宽度可以更改，因此我需要一个没有javascript的自动解决方案。除非您能给我一个可以在服务器端运行的算法，否则不能按单个列进行设置。 我不认为这仅在css中是可能的，但我不是css大师，这就是为什么我问Html css-拉伸和等距水平菜单,html,css,alignment,stretch,Html,Css,Alignment,Stretch,我希望，你能帮助我，我有一个水平菜单，我的问题如下： 第一个是表格的正常拉伸，第二个是我想要的：拉伸+文本之间的偶数间隙 我用额外的不间断空格实现了这一点，但它只适用于固定的菜单宽度，因此如果我更改菜单宽度，我必须更改nbsp字符的计数。有没有什么方法可以用css实现这一点，而不需要那些不间断的空格 菜单点的计数和菜单宽度可以更改，因此我需要一个没有javascript的自动解决方案。除非您能给我一个可以在服务器端运行的算法，否则不能按单个列进行设置。 我不认为这仅在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>
* {
边际：0px；
填充：0px；
字体大小：16px；
}
桌子{
宽度：400px；
}
运输署{
边框：1px纯蓝色；
文本对齐：居中；
}
<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>
<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>
可以设置各个列的宽度 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>
<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>
<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>
<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>
<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>
<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>
不确定这里的所有参数（“拉伸”不是很清楚），但是链接上的一些左右填充不是可以做到吗？因为这是一个菜单，所以我不会使用表格，而是使用
<!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>
ul，li{边距：0；填充：0；}
ul{列表样式：无；显示：表格；边框间距：5px；}
li{显示：表格单元格；背景：#f7f7f7；边框：1px纯蓝色；}
LIA{填充：0 30px；}
<!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>
ul，li{边距：0；填充：0；}
ul{列表样式：无；显示：表格；边框间距：5px；}
li{显示：表格单元格；背景：#f7f7f7；边框：1px纯蓝色；}
LIA{填充：0 30px；}
灵感来源于此：编辑：以下答案与IE 11等最新版本的Internet Explorer不兼容。它的单元格大小算法似乎与其他浏览器的工作方式不同。 虽然这需要一些跨浏览器测试，但我一直在使用以下内容： HTML: 到目前为止，这为我提供了一个菜单，在所有屏幕尺寸下都能很好地工作；在移动设备上，它缩小到屏幕宽度，在桌面上，它增大到一定的大小，链接总是均匀分布
灵感来源于此：这可以通过CSS实现，方法是使父元素文本对齐：justify，子元素显示：inline block；然而，对齐文本只有在至少有两行时才能正常工作。伪：after元素用于强制一条额外（非常小）的线：
这项技术归功于。这可以通过CSS实现，方法是使父元素文本对齐：对齐，子元素显示：内联块；然而，对齐文本只有在至少有两行时才能正常工作。伪：after元素用于强制一条额外（非常小）的线：
这项技术归功于。是的，我知道，但这不是自动的。。。我会编辑我的问题，等一下。是的，我知道，但这不是自动的。。。我将编辑我的问题，请稍等。编辑两次，也许现在已经很明显了。：-）编辑了两次，也许现在很明显了。：-）好的，我想知道，你说的“拉伸”是指菜单总是拉伸到100%的宽度吗？如果是，则返回到绘图板。：-）如果我调整窗口大小，拉伸不起作用，但是如果我手动更改宽度，则拉伸起作用。我不知道为什么填充有帮助，但它很完美！：-）谢谢！：-）如果在一个巨大的水平空间中有3个菜单点，会有一点不同，但我通常至少有5-6个菜单点，所以对我来说已经足够好了。再次感谢！：-）好的，我想知道，你说的“拉伸”是指菜单总是拉伸到100%的宽度吗？如果是，则返回到绘图板。：-）如果我调整窗口大小，拉伸不起作用，但是如果我手动更改宽度，则拉伸起作用。我不知道为什么填充有帮助，但它很完美！：-）谢谢！：-）如果在一个巨大的水平空间中有3个菜单点，会有一点不同，但我通常至少有5-6个菜单点，所以对我来说已经足够好了。再次感谢！：-）适用于firefox和chrome，但不适用于MSIE。@inf3rno哪个版本？IE8及以下版本不支持显示：表格单元格，但即使如此，菜单似乎仍能充分呈现。
MSIE 11.0.9600