對齊屏幕上的UL元素

Question

我真的很希望有人能幫助我。我想在Wordpress網站中證明我的類別菜單。

你可以在這裏看到，五顏六色的菜單頂部：http://www.postscriptum.hostingas.in/

在HTML菜單被稱爲「section-bar」。

這裏是CSS代碼：

.section-bar { 
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.65); 
    margin-bottom: 1px; 
    padding: 5px 0 5px 0; 
    background: #252525; 
} 

.section-bar ul li { 
    padding: 1px 1px 1px 0; 
} 
.section-bar ul li a { 
    display: block; 
    color: #fff; 
    padding: 3px 5px; 
    font-weight: bold; 
} 

我試圖把這一點，但什麼都沒有改變：

.section-bar ul { 
    text-align:justify; 
} 

我怎樣才能使它很好地融入畫面。

Answer 1

在一行中有5個元素，將包裝大小拆分爲5個元素（例如1000/5 = 200px），並將寬度li設置爲200px（本例中）。

Answer 2

看看您的網站，首先想到的是改變li項目的CSS，以便每個項目具有相同的寬度，並且足夠大以將最大標題放在一行上。所以要做到這一點，我會改變寬度爲356px。

.section-bar ul li { 
    padding: 1px 1px 1px 0; 
    width: 356px; 
}