0

好的，我有一个列表，我想使用 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;

}
4

3 回答 3

0

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

于 2013-03-24T22:38:41.103 回答
0

以下示例应该会有所帮助：

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/

于 2013-03-24T22:42:55.200 回答
0

由于用户代理样式表对文档的默认格式，因此会显示缩进。要摆脱填充，只需添加padding: 0到您的#search_list.

#search_list {
    list-style-type: none;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding: 0;
}
于 2013-03-24T22:45:57.130 回答