更新

Question

好的，我有一个列表，我希望使用CSS将所有内容集中在其中。

无论如何，我用谷歌搜索，我发现，删除列表样式，没有左边距。但是，我也希望将它居中，所以我使用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

由于用户agent style sheet的默认文档格式，缩进显示。要摆脱填充，只需将padding: 0添加到#search_list。

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

在保持没有缩进的同时使列表居中

3 个答案:

更新