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