[英]Center list in div (for navigation bar)
Going off of the note at the top of this tutorial ( http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ ), I tried to center a list of two links in the page, but it is centering only the first list item, not the entire list. 在本教程顶部的注释( http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ )的基础上,我尝试将列表居中页面中两个链接的位置,但它仅将第一个列表项居中,而不是整个列表的居中。
li{
font-family: Futura, Arvo, sans-serif;
display: inline-block;
}
ul{
text-align: center;
}
div#nav-list {
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
width: auto;
height: auto;
background: #E8E8E8;
}
"nav-list" is the container for the navigation bar, shown in the picture colored grey. “导航列表”是导航栏的容器,如灰色图片所示。
Here is the issue- you can see that "about" is centered, but not the entire list. 这是问题所在-您可以看到“关于”居中,而不是整个列表居中。
Thanks in advance! 提前致谢! Edit: Here's the HTML: 编辑:这是HTML:
<div id="center_content">
<h1 id="page-heading">Title</h1>
<hr id="first-rule"></hr>
<div id="nav-list">
<ul>
<li>about</li> <li>work</li>
</ul>
</div>
<hr></hr>
<p>Here is a paragraph. </p>
</div>
Remove the list padding. 删除列表填充。 By default, list have a 40px
padding-left. 默认情况下,列表的左边距为40px
。 Try to use ul{ padding:0; }
尝试使用ul{ padding:0; }
ul{ padding:0; }
Try apply these styles : 尝试应用以下样式:
ul {
margin: 0 auto;
padding: 0;
text-align: center;
width: 170px; /*as per your need*/
}
Hows this for you: http://jsfiddle.net/theStudent/6UnNs/ 您的情况如何: http : //jsfiddle.net/theStudent/6UnNs/
CSS CSS
li {
font-family: Futura, Arvo, sans-serif;
display: inline-block;
padding: 10px;
}
ul {
text-align: center;
background:red;
width: 25%;
margin:0 auto;
}
ul li:first-child {
background:#ccc;
display:block;
margin:0 0 0 -40px;
}
HTML HTML
<ul>
<li>TITLE</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ul>
Just play with settings I added some color so you can see 只是玩我添加了一些颜色的设置,所以您可以看到
Here you go: 干得好:
1) Set text-align: center;
1)设置text-align: center;
on the nav-list element 在nav-list元素上
2) Set d isplay: inline-block
on the list 2)设置d isplay: inline-block
列表中的isplay: inline-block
li {
font-family: Futura, Arvo, sans-serif;
display:inline-block;
padding: 0 10px;
}
ul{
list-style: none;
display: inline-block;
padding:0;
}
div#nav-list {
text-align: center;
background: #E8E8E8;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.