Question

我想将ul列表放在html / CSS中。我知道该怎么做：

ul { 
list-style: none outside none; 
margin:0; 
padding: 0; 
text-align: center;
}

li { 
display: inline; 
margin: 0 10px; 
}

我的问题是ul / li是在float: right;之前声明的。

ul li {
  float: right;
}

如何在ul列表中以float: right为中心？

此问题是由ul / li CSS块后的媒体查询规范引起的。

Answer 1

给出要居中的宽度（ul）。然后将其左右边距设置为自动。

ul { margin:0 auto; width:150px; }

Answer 2

这对您有用吗？

/* your old styles */
ul li { float: right; }
ul,li { margin: 0; padding: 0; list-style: none; }

/* just visual decoration */
ul li { outline: 1px solid red; padding: 5px; }

/* centering */
.wrap { text-align: center; }
ul { display: inline-block; }

<div class="wrap">
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>   
</div>

重置ul列表中的float

2 个答案: