Question

经过一些搜索后，我找不到将<li>列表固定到固定宽度div的正确方法。

看看the page ..它也不起作用！

Answer 1

以ul为中心，也将li元素置于其中心，并使ul的宽度动态变化，使用display：inline-block;并将其包裹在一个居中的div中。

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

<强>更新

Here is a jsFiddle link上面的代码。

Answer 2

由于ul和li元素默认为display: block，因此请auto margins and a width that is smaller than their container。

ul {
    width: 70%;
    margin: auto;
}

如果你已经改变了它们的显示属性，或者做了一些覆盖正常对齐规则的东西（例如浮动它们），那么这将不起作用。

Answer 3

步骤：

将style="text-align:center;"写入div

ul

将style="display:inline-table;"写入ul
将style="display:inline;"写入li

或使用

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

Answer 4

我喜欢flexbox：

ul {
  justify-content: center;
  display: flex;
}

Answer 5

这是将UL放在任何DIV容器内部的更好方法。

此CSS解决方案不使用Width和Float属性。 Float：Left和Width：70％，当您需要在具有不同菜单项的不同页面上复制菜单时，会让您感到头疼。

我们使用填充和边距来确定文本/菜单项周围的空间，而不是使用宽度。另外，不要在LI元素中使用Float：Left，而是使用display：inline-block。

通过左移你的LI，你实际上将你的内容浮动到左边，然后你必须使用上面提到的一个Hack来集中你的UL。显示：inline-block为您创建Float属性（有点）。它将您的LI元素转换为一个彼此并排放置的块元素（不浮动）。

使用响应式设计和使用Bootstrap或Foundation等框架，在尝试浮动和居中内容时会出现问题。他们有一些内置的类，但从头开始做总是更好。对于动态菜单（例如Adobe Business Catalyst菜单系统），此解决方案要好得多。

可以在以下网址找到本教程的参考资料：http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

Answer 6

可以是

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

或

div li
{
text-align: center;
}

取决于它应该是什么样子（或组合它们）

Answer 7

要使块对象居中（例如ul），需要在其上设置宽度，然后可以将左右边距对象设置为自动。

要使块对象的内联内容居中（例如li的内联内容），您可以设置css属性text-align: center;。

Answer 8

尝试

div#divID ul {margin:0 auto;}

Answer 9

只需将text-align: center;添加到<ul>即可。问题解决了。

Answer 10

有趣但是尝试使用ul中的浮动li元素： Example here

现在的问题是：ul需要一个固定的宽度来实际坐在中心。但是我们希望它相对于容器宽度（或动态），margin：0上的auto不起作用。

更好的方法是放弃UL / Li列表并使用不同的方法example here

Answer 11

如果您知道ul的宽度，那么您只需将ul的边距设置为0 auto;

这将使ul与包含div的中间对齐

示例：

<强> HTML：

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

<强> CSS：

  #container ul{
    width:300px;
    margin:0 auto;
  }

Answer 12

这是我能找到的解决方案：

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

Answer 13

另一种选择是：

<强> HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>

<强> CSS：

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

Answer 14

我一直在寻找相同的案例，并通过更改<li>的宽度来尝试所有答案不幸的是，所有人都无法在<ul>框的左右两侧获得相同的距离。

最接近的匹配是this answer，但需要 使用填充调整宽度的变化

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

请参阅下面的结果，<li>与<ul>框之间的所有距离都相同。

你可以在这个jsFiddle上检查它：
http://jsfiddle.net/qwbexxog/14/

Answer 15

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Answer 16

使用oldschool center-tags

<div> <center> <ul> <li>...</li> </ul></center> </div>

： - ）

中心<ul> <li>进入div </li> </ul>

16 个答案: