CSS - 拉伸和均匀分布的水平菜单 [英] css - stretched and evenly spaced horizontal menu
问题描述
我希望，你能帮助我，我有一个横向菜单，我的问题是这样的：
首先是正常的弹力带桌子，第二个是我想要的：弹力+文本之间甚至差距
我有额外的非中断空格做到了这一点，而只是它的工作原理是固定的菜单的宽度，所以如果我改变菜单的宽度我必须要改变的NBSP字符数。有没有办法用CSS做到这一点，如果没有这些非打破空间？
的menupoints的计数和菜单的宽度可以改变，所以我需要没有JavaScript的一个自然而然的解决方案。通过各列没有设置，除非你能不能给我一个算法，我可以在服务器端运行。
我不认为这是可能的，只有的CSS，但我不是一个css大师，这就是为什么我问......
＆LT;风格＆GT;
* {
保证金：0px;
填充：0px;
字体大小：16像素;
}
表 {
宽度：400像素;
}
TD {
边界：1px的固体蓝色;
文本对齐：中心;
}
＆LT; /风格＆GT;
＆LT;表＆gt;
＆其中; TR＆GT;
＆其中; TD＆GT;＆所述; A HREF =＃＆GT;氨基酸＆所述; / a取代;＆所述; / TD＆GT;
＆其中; TD＆GT;＆所述; A HREF =＃＆GT; aaaaaaaaaaaaa＆所述; / a取代;＆所述; / TD＆GT;
＆其中; TD＆GT;＆所述; A HREF =＃＆GT; AAAAAAAAA＆所述; / a取代;＆所述; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;表＆gt;
＆其中; TR＆GT;
＆其中; TD＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆所述; A HREF =＃＆GT;氨基酸＆所述; / a取代;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP ;＆安培; NBSP;＆安培; NBSP;＆LT; / TD＆GT;
＆其中; TD＆GT;＆安培; NBSP;＆安培; NBSP;＆所述; A HREF =＃＆GT; aaaaaaaaaaaaa＆所述; / a取代;＆安培; NBSP;＆安培; NBSP;＆所述; / TD＆GT;
＆其中; TD＆GT;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆所述; A HREF =＃＆GT; AAAAAAAAA＆所述; / a取代;＆安培; NBSP;＆安培; NBSP;＆安培; NBSP;＆所述; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
不知道这里所有的参数（拉伸，是不是很清楚），但不会对连结一些左右填充办呢？因为这是一个菜单，我不会用一个表，但一个＆LT; UL＆GT; 代替。有许多变化对这个如果不是你想要的：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT;花柱媒体=所有＆GT;
UL，李{保证金：0;填充：0;}
UL {列表样式：无;显示：表;边框间距：5像素; }
李{显示：表细胞;背景：＃f7f7f7;边界：1px的固体蓝色; }
李一{填充：0 30PX;}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT; AA＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT; aaaaaaaaaaaaa＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃＆GT; AAAAAAAAA＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I hope, you can help me, I have a horizontal menu, my problem is the following:
The first is normal stretch with table, the second is what I want: stretch + even gaps between texts.
I achieved this with additional non breaking spaces, but it works only by fixed menu widths, so if I change the menu width I have to change the count of the nbsp characters. Is there any way to do this with css, and without those non breaking spaces?
The count of the menupoints and the menu width can change, so I need an automatical solution without javascript. No settings by individual columns, unless you can give me an algorithm which I can run on server side.
I don't think this is possible with css only, but I'm not a css guru, that's why I asked....
<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>
Not sure of all the parameters here ("stretch" is not very clear), but wouldn't some left and right padding on the links do it? Because this is a menu, I won't use a table but a <ul> instead. There are plenty of variations on this if it's not what you want:
<!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>
这篇关于CSS - 拉伸和均匀分布的水平菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
