CSS在元素之間平均划分空格，但使用最大空間

Question

我正在使用不同的li創建一個導航ul ，它應該平均共享空白。

問題在於元素之間的空白應具有30px的最大寬度。 右側的鏈接應始終保持正確。

 .container { display: flex; border: 1px solid red; } ul { margin: 0 30px 0px 0px; display: flex; list-style: none; padding: 0; flex-grow: 1; justify-content: space-between; } li { margin: 0; padding: 0px 5px; border: 1px solid green; flex-basis: 0; } li:first-child{ padding-left: 0px; } .secondPart { margin-left:auto; flex-shrink: 0; } 

 <div class=container> <ul> <li>my elem</li> <li>my elem 2</li> <li>my elem 3</li> <li>my elem 4</li> </ul> <div class=secondPart> <a>my link</a> </div> </div> 

總結問題：

li應該在元素之間具有動態空間，但是最大空間為30px 。 我添加了一個填充，因為那應該是min-space 。

將不勝感激任何提示！

小提琴： http : //jsfiddle.net/kLu34f1a/14/

Answer 1

在li和jQuery上使用margin來測量子項的長度

這將使您接近。 我建議為您的ul添加最大寬度

該片段使用jQuery來衡量子項的長度。 如果項目的總和大於容器寬度，則可以使用功能更改行項目的邊距。 您會發現，如果添加更多li則會調用console.log函數。

我將li的邊距設置為15px（每側15像素，總共30個最大像素間隔）

 var containerWidth = $("#li-container").outerWidth(); console.log(containerWidth); var w = 0; // the 'true' paramater inside the outerWidth function includes margins $("#li-container li").each(function(){ w += $(this).outerWidth(true); }); console.log(w); // if the total length of the line items is more than the container, do this event if(w>containerWidth) { $("#li-container li").each(function(){ $(this).css("margin", "0px 5px"); }); console.log(w); } 

 .container { display: flex; border: 1px solid red; } ul { margin: 0 30px 0px 0px; display: flex; list-style: none; padding: 0; justify-content: center; max-width: 600px; } li { margin: 0 15px; padding: 0px 5px; border: 1px solid green; flex-basis: 0; } li:first-child{ padding-left: 0px; } .secondPart { margin-left:auto; flex-shrink: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=container> <ul id="li-container"> <li>my elem</li> <li>my elem 2</li> <li>my elem 3</li> <li>my elem 4</li> </ul> <div class=secondPart> <a>my link</a> </div> </div>