我一直在想办法解决这个问题,将头撞在墙上已经太久了。

我正在为我的博客构建一个响应式网站。导航栏由具有6个<ul><li>组成。其中5个显示在全尺寸屏幕上。当屏幕缩小到移动大小时,将出现导航图标,其他列表项消失。由于某些原因,我无法使navicon(汉堡图标)出现在屏幕中央。我试图避免使用position:relative将其居中。


/*Reponsive CSS*/

@media only screen and (max-width: 500px) {

#navbar nav a {
	display: none;
}

#navbar nav a.menu-icon {
	display: block;
	font-size: 35px;
	padding: 30px 30px;
}

#navbar nav a.menu-icon:hover {
	text-decoration: none;
}


}

<aside>
	<div id="navbar">
		<nav>
			<ul>
				<li><a href="/">Item 1</a></li>
				<li><a href="blank.html">Item 2</a></li>
				<li><a href="blank.html">Item 3</a></li>
				<li class="pull-right"><a href="blank.html">Item 4</a></li>
				<li class="pull-right"><a href="blank.html">Item 5</a></li>
				<li><a href="#" class="menu-icon">&#9776;</a></li><!--On a mobile device this is the only list item displaying -->
			</ul>
		</nav>
	</div>
</aside>





html - 将列表项放在无序列表的中心-LMLPHP

最佳答案

您可以通过设置text-align:center;将元素或文本节点居中,也可以通过在元素本身上应用margin-left: auto; margin-right: auto;来使块元素居中。

在这种情况下,<li>及其<a>跨越了其父对象的整个宽度,只是<a>内的文本未居中。因此,您必须将text-align: center;应用于.menu-icon



/*Reponsive CSS*/

@media only screen and (max-width: 500px) {

#navbar nav a {
	display: none;
}

#navbar nav a.menu-icon {
    display: block;
    font-size: 35px;
    padding: 30px 30px;
    text-align: center;
}

#navbar nav a.menu-icon:hover {
	text-decoration: none;
}


}

<aside>
	<div id="navbar">
		<nav>
			<ul>
				<li><a href="/">Item 1</a></li>
				<li><a href="blank.html">Item 2</a></li>
				<li><a href="blank.html">Item 3</a></li>
				<li class="pull-right"><a href="blank.html">Item 4</a></li>
				<li class="pull-right"><a href="blank.html">Item 5</a></li>
				<li><a href="#" class="menu-icon">&#9776;</a></li><!--On a mobile device this is the only list item displaying -->
			</ul>
		</nav>
	</div>
</aside>

10-05 20:48
查看更多