将<ul> <li>中心转换为div

Question

经过一些搜索,我没有找到一个正确的方法来将列表中心<li>固定到一个固定的宽度div.

看看页面 ..它也不起作用!

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>

更新

这是上面代码的jsFiddle链接.

Answer 2

因为ul和li元素是display: block默认的 - 给它们自动边距和宽度小于它们的容器.

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

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

Answer 3

我喜欢flexbox:

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

Answer 4

脚步 :

1. 写style="text-align:center;"于母公司div的ul
2. 写style="display:inline-table;"至ul
3. 写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 5

这是将UL置于任何DIV容器内部的更好方法.

此CSS解决方案不使用Width和Float属性.浮动:左侧和宽度: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;
}

取决于它应该是什么样子(或组合这些)