我试图把我的名单集中在一起,因为无论我尝试什么,我的生活都无法理解。显然,我并没有在正确的地方尝试正确的事情。帮助并解释我需要做什么。谢谢!
HTML
<div id = "listwrapper">
<h3>Partner Companies</h3>
<ol id = "list">
<li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
<li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
<li><a href="unity3d.com/">Unity game developer engine</a></li>
</ol>
</div>
和CSS
#listwrapper
{
margin: auto;
text-align: center;
}
#list
{
margin: auto;
}
#list li
{
display: inline;
}
答案 0 :(得分:2)
您必须重置浏览器添加的默认列表填充:
#list
{
padding-left:0;
}
http://jsfiddle.net/nvuqf7wL/1/
您应该选择2种居中方法: -margin:汽车; -text-align:center;
如果你知道容器/列表的宽度并且你不想要这个容器的中心内容,那么第一个(margin auto)会更好。在这个特殊的例子中,这将是中心,但不是。
如果您不知道容器的宽度,则使用第二种方法(文本对齐)但如果您不想将此容器的内容居中,则必须将其重置为儿童/儿童的左侧。
答案 1 :(得分:0)
margin: auto o; // should centre item
margin-left: auto; // for i.e
margin-right: auto; // for i.e
上面的CSS应该是所有主流浏览器中的块级元素的中心。
整个列表而不是李,他们应该保持正确的顺序。
修改强> 作为参考,以下css应该能够显示订购数量
li {
float:left;
margin:10px;
list-style-position:inside;
}
答案 2 :(得分:0)
您需要将html文件与css文件“链接”起来。这样做的方法是将此行添加到您的html文件中:
<link rel="stylesheet" type="text/css" href="yourcssfilename.css">
只需添加它,以便您的整个html文件如下所示:
<link rel="stylesheet" type="text/css" href="style.css">
<div id = "listwrapper">
<h3>Partner Companies</h3>
<ol id = "list">
<li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
<li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
<li><a href="unity3d.com/">Unity game developer engine</a></li>
</ol>
</div>
我通过添加该行尝试了您的代码,它的工作方式如下所示:
之前:
后:
如果您希望它显示如下:
然后在你的css文件中删除它:
#list li
{
display: inline;
}