Question

这应该是非常简单的事情，但我现在已经挣扎了很长一段时间了。 我希望无序列表在div 中保持居中。无序列表的显示设置为内联，我希望在ul中的项目之间保持一致的距离。

在下面的代码中，您会注意到我有＆＃39; .menu2＆＃39;设置为display：none。对于较大的窗口，我有两个垂直排列的无序列表，并排放置。对于我现在正在使用的小窗口，我想要隐藏其中一个ul和剩余的ul我想要内联显示。我唯一的问题是保持ul以页面为中心。

需要注意的事项：

-I＆＃39;我试图将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

由于您float: left

.menu li，因此无效

删除它并添加：

display: inline-block;

故障将DIV内部的UL集中在流体网格布局中

1 个答案: