CSS - 拉伸和均匀分布的水平菜单

我希望你能帮助我，我有一个横向菜单，我的问题是：与表CSS - 拉伸和均匀分布的水平菜单

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>

来源

2013-04-29 inf3rno

不知道这里的所有参数（” 拉伸”不是很清楚），但是不会在连接上做一些左右填充吗？因为这是一个菜单，所以我不会使用表格，而是使用<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>

来源

2013-04-29 08:56:09

好的，我想知道是否通过“拉伸”，你的意思是菜单总是延伸到100％的宽度？如果是这样，那么回到绘图板。 :-) – 2013-04-29 09:02:03

如果我调整窗口的大小，拉伸不起作用，但如果我手动更改宽度，那么它就起作用。我不知道为什么填充有帮助，但它是完美的！：-）谢谢！ :-) – inf3rno 2013-04-29 10:12:38

如果你在一个巨大的水平空间中有3个menupoint，但是我通常至少有5-6个menupoints，所以它对我来说已经足够了。再次感谢！ :-) – inf3rno 2013-04-29 10:27:13

您可以设置宽度为单独列。

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

来源

2013-04-29 08:33:09

是的我知道，但这不是自动的...我会编辑我的问题，只需一分钟。 – inf3rno 2013-04-29 08:34:37

JSFIDDLE

可以设置个E “填充左，右各个列

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

来源

2013-04-29 08:42:27 Kino

编辑两次，也许现在很明显。 :-) – inf3rno 2013-04-29 08:45:48

编辑：下面的答案并不好使用Internet Explorer版本近期作为细胞大小IE 11，它的算法似乎不同携手比其他浏览器。

尽管这将需要一些跨浏览器测试，这里是我一直使用的是什么：

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

来源

2014-06-01 21:15:05

适用于firefox和chrome，但不适用于MSIE。 – inf3rno 2014-06-02 05:00:39

@ inf3rno哪些版本？ IE8及以下版本不支持display：table-cell，但即使如此，菜单似乎仍然可以充分呈现。 – 2014-06-03 04:38:41

'MSIE 11.0.9600' 为什么我无法发送简短的评论？：S – inf3rno 2014-06-03 04:44:42

这可以用CSS通过使父元素的text-align实现：justify和子元素显示：inline-block的;但是，有理由的文本只有在至少有两行时才能正常工作。伪：后元素被用来迫使一个额外的（非常小的）线：

#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/这种技术。

来源

2015-03-03 06:38:56

CSS - 拉伸和均匀分布的水平菜单

回答

相关问题