如何将列表项居中在UL元素中？ [英] How do I center list items inside a UL element?

问题描述

如何在ul中列出项目，而不使用额外的div或元素。我有以下。我认为 text-align：center 会做的。我似乎不明白。

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can't seem to figure it out.

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

检查jsfiddle http://jsfiddle.net/3Ezx2/1/

Check jsfiddle http://jsfiddle.net/3Ezx2/1/

推荐答案

写显示： inline-block 而不是 float：left 。

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

这篇关于如何将列表项居中在UL元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！