均勻分發li物品，絕對寬度

在響應式網站的頁腳中，我需要平均分配一些li物品。均勻分發li物品，絕對寬度

這就是我想要達到的目標：

enter image description here

這就是我：

enter image description here

我想避免設置絕對寬度爲每個L1，以保持網站這部分的響應能力。

什麼是最佳的處理方式？

來源

2014-12-04 Thibaud Clement

你可以嘗試

text-align:justify;

您的UI元素

這裏是一個小提琴

http://jsfiddle.net/89bnF/833/

來源

2014-12-05 00:11:43 jdwallace12

感謝。你能解釋你對「之前」和「之後」的使用嗎？ – 2014-12-05 00:28:06

在你的屏幕截圖的效果可以用保證金來實現：

.bottomMenu li { 
    margin-right: 24px; 
}

如果你想要一個漂亮的，合理的外觀和你不關心很老的瀏覽器，你可以使用柔性模型：

.bottomMenu (
    display: flex; 
    justify-content: space-between; 
}

來源

2014-12-05 00:29:24

謝謝安德烈。我想避免使用寬度（px）的絕對值，而是使用相對值（％）。我已經實施了你的建議的第二部分，但沒有達到預期的結果。這是一個鏈接到網站：www.guestbud.com/secret。我錯過了什麼嗎？ – 2014-12-05 00:41:33

您的'footermenu' div只包含一個孩子（'ul'），所以沒有空間。您需要在'.footermenu ul'上設置這些規則（'display：flex; justify-content：space-between;'）。此外，你有一個空的'li'元素干擾間距。 – 2014-12-05 02:36:02

均勻分發li物品，絕對寬度

回答

相關問題