我希望有一个导航栏,其中的元素(li>a)居中显示。目前只实现了左浮动样式。
#wrapper {
width: 900px;
margin: 0 auto;
}
li {
float: left;
}
ul>li>a {
display: block;
padding: 14px 16px;
color: #fff;
text-align: center;
text-decoration: none;
margin: 0 auto;
font: 18px Inconsolata;
}
/* fdfdf */
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 20px;
}
ul>li:hover {
background: #111;
}
li>a.active {
background-color: #4CAF50;
color: #fff;
}
<div id='wrapper'>
<ul>
<li><a class='active' href="#">Home</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</div>
你看到我放了ul>li>a {margin:0 auto;}
为什么它不起作用?
</li><li>
,它就会消失 https://jsfiddle.net/h933o3jy/1/ - Unamata Sanatarai