Question

问：我需要将两个无序列表的list-item元素居中，就好像它们只是一个列表的子元素一样：

Example:
                {[1][1][1][1][2][2]}
                {      [2][2]      }

HTML布局

<div>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
<div>

我尝试了什么

将剩余的<li>元素浮动接近，我们可以使用<div>容器元素的宽度，但当然所有内容都是左对齐的。
在display: inline项目上设置<li>，在包含text-align: center的{{1}}上设置div，这也很接近，但最终不是我需要的。

Answer 1

您可以将所有内容设置为display: inline

http://jsfiddle.net/p5oax2u9/1/

div {
    text-align: center;
    width: 60px;
}

ul, li {
    display: inline;
    margin: 0;
    padding: 0;
}

我在div 60px上设置了宽度，因此更容易看到结果

Answer 2

最好使用display: inline;＆amp;对于你的css文件中的ul和li padding: 0;。这将为您提供所需的输出。

Answer 3

通过居中div + text-align：居中并显示内联列表元素应该有效。

li {
    display: inline;
}
div {
    text-align: center;
    width: 80%;
    margin: auto;
}

JSFiddle：line 317

Answer 4

这可以是一种灵活的方式来执行列表项的行。

如果您想要隐藏特定项目，也可以使用伪类型的最后类型。

＆＃13;

#Wrap {
  width: 500px;
}
#ul1,
#ul2 {
  list-style: none;
  width: 500px;
  margin: 0;
  padding: 0;
  clear: both;
  display: block;
}
li {
  float: left;
  width: 25%; 
  height: 30px;
  display: block;
  box-sizing:border-box;
  padding:5px;
  text-align:center;
}
#ul1 li {
  background: #def;
  border: 1px solid #ddd;
}
#ul2 li {
  background: #eee;
  border: 1px solid #ddd;
}

＆＃13;

<div id="Wrap">
  <ul id="ul1">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
  <ul id="ul1">
    <li></li>
    <li>2</li>
    <li>2</li>
    <li></li>
  </ul>
  <div>

＆＃13;

如何将两个列表中的列表元素居中，就像所有单个元素一样？

4 个答案: