css - 在流体网格布局中将 UL 置于 DIV 中时出现问题

Question

这应该很简单，但我已经为此苦苦挣扎了一段时间。 我希望无序列表在 div 中保持居中。无序列表的显示设置为内联，我想在ul中的元素之间保持一致的距离。

在我下面的代码中，您会注意到我将“.menu2”设置为显示:无。对于较大的窗口，我有 2 个垂直结构的无序列表，并排放置。对于我现在正在使用的较小的窗口，我想隐藏其中一个 ul，而其余的 ul 我想以内联方式显示。我遇到的唯一问题是让 ul 以页面为中心。

一些注意事项:

-我试图让 ul 只在一行上

-这应该只适用于平板电脑大小的窗口，因此由于空间原因，ul 需要占据页面的整个宽度。

-当我在浏览器中预览它并调整窗口大小时，我注意到 ul 似乎与窗口左侧保持一定距离，而随着窗口大小的变化，右侧的间隙ul 发生变化。为了尝试解决这个问题，我尝试在右侧给出一个 % 位置，但这没有任何区别。

.menu li   {
list-style-type: none;
width: auto;
font-family: source-sans-pro;
font-style: normal;
font-weight: 200;
float: left;
clear: both;
color: rgba(248,248,248,1.00);
padding-top: 1%;
font-size: 100%;
}

.menu {
width: 20%;
margin-top: 12%;
position: relative;
left: 1%;
float: left;
}

@media only screen and (min-width: 482px) {

.menu2 {
display: none; 
 }
.menu {
width: 100%;
margin-top: 60px;
}
.menu li {
display: inline;
clear:none;
padding-left: 3%;
padding-right: 3%;
font-size: 80%;
}

http://jsfiddle.net/nickatnite_9/8UDC9/embedded/result/

它在我的页面中的样子不完全是这样，但希望它能给你一个想法。

Answer 1

它不起作用，因为您在 .menu li 处有 float: left

删除它并添加:

display: inline-block;