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 - 拉伸和均勻分佈的水平菜單

回答

相關問題