使列表居中同时不缩进

Question

好的，我有一个列表，我想使用CSS将所有内容居中。

无论如何，我用Google搜索它，发现删除了列表样式，并且没有左边距。 但是，我也想将其居中，因此我使用text-align:center; 。 但是由于某种原因，缩进显示出来了，所以它并不是正好在中间，这正是我想要的。

如果您想举一个例子，请在tst.burngames.net上找到一个例子。

由于每个人都显然需要代码才能访问网站。

HTML：

<body>
    <div id="search">
        <input id="search_input" placeholder="Search for game.">
        <ul id="search_list">
            <li>
                One
            </li>
            <li>
                Two
            </li>
            <li>
                Three
            </li>
        </ul>
    </div>
</body>

CSS：

body {

    background: url(../images/fire.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#search {

    background-color:white;
    border-color:black;
    border-style:double;
    border-width: thick;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
    width:600px;
    height:100%;
}

#search_input {

    width:99%;
    height:50px;
    margin-top:20px;
    text-align:center;
}

#search_list {

    width: 99%;
    margin-left:auto;
    margin-right:auto;

}
li {

    list-style-type:none;
    padding-left: 0px;
    margin-top:10px;
    margin-bottom:10px;
    text-align:center;

}

Answer 1

尝试将其放入DIV中并使DIV居中。

Answer 2

以下示例应有帮助：

HTML：

<ul class="nice">
    <li>James</li>
    <li>Dan</li>
</ul>

CSS：

.nice {
    list-style-type: none;
    text-align: center;
    padding:0px;
}

这是一个有效的jsFiddle- http://jsfiddle.net/8NjfW/1/ 。

更新资料

这是有关您的新代码的有效jsFiddle- http://jsfiddle.net/APv9P/

Answer 3

由于用户代理样式表默认设置了文档格式，因此出现了缩进。 要摆脱填充，只需在#search_list添加padding: 0即可。

#search_list {
    list-style-type: none;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding: 0;
}

使列表居中同时不缩进

问题描述

3 个解决方案

解决方案1
0 2013-03-24 22:38:41

解决方案2
0 已采纳 2013-03-24 22:42:55

更新资料

解决方案3
0 2013-03-24 22:45:57

使列表居中同时不缩进

问题描述

3 个解决方案

解决方案1 0 2013-03-24 22:38:41

解决方案2 0 已采纳 2013-03-24 22:42:55

更新资料

解决方案3 0 2013-03-24 22:45:57

解决方案1
0 2013-03-24 22:38:41

解决方案2
0 已采纳 2013-03-24 22:42:55

解决方案3
0 2013-03-24 22:45:57