在屏幕中对齐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;
}