使列表居中同时不缩进
[英]Centering a list while maintaining no indentation
问题描述
Okay, I have a list, and I want to center everything in it using CSS. 
好的，我有一个列表，我想使用CSS将所有内容居中。
Anyway, I googled it, and I found, to remove the list style, and no left margin. 无论如何，我用Google搜索它，发现删除了列表样式，并且没有左边距。 But, I want to center it also, so I use text-align:center; 但是，我也想将其居中，因此我使用text-align:center; . 。 But for some reason, the indent shows up, so it is not exactly in the center, which is what I want. 但是由于某种原因，缩进显示出来了，所以它并不是正好在中间，这正是我想要的。
If you want a example, there's one at tst.burngames.net 如果您想举一个例子，请在tst.burngames.net上找到一个例子。
Since everyone apparently needs code when there's a website.. 由于每个人都显然需要代码才能访问网站。
HTML: 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: 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;
}
3 个解决方案
解决方案1
0 2013-03-24 22:38:41
尝试将其放入DIV中并使DIV居中。
解决方案2
0 已采纳 2013-03-24 22:42:55
The following example should help: 以下示例应有帮助：
HTML: HTML：
<ul class="nice">
<li>James</li>
<li>Dan</li>
</ul>
CSS: CSS：
.nice {
list-style-type: none;
text-align: center;
padding:0px;
}
Here is a working jsFiddle - http://jsfiddle.net/8NjfW/1/ . 这是一个有效的jsFiddle- http://jsfiddle.net/8NjfW/1/ 。
Update 更新资料
Here is a working jsFiddle in regard to your new code - http://jsfiddle.net/APv9P/ 这是有关您的新代码的有效jsFiddle- http://jsfiddle.net/APv9P/
解决方案3
0 2013-03-24 22:45:57
The indent shows up because of the default formatting of documents by the user agent style sheet . 由于用户代理样式表默认设置了文档格式，因此出现了缩进。 To get rid off of the padding, just add padding: 0 to your #search_list . 要摆脱填充，只需在#search_list添加padding: 0即可。
#search_list {
list-style-type: none;
width: 99%;
margin-left: auto;
margin-right: auto;
list-style: none;
padding: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.