极客观点
项目管理
HarmonyOS
我有一个导航栏，它跨越整个页面的宽度。我还添加了一个 jQuery 脚本，以便它在滚动一段时间后更改为 position:fixed，但我认为这不会影响这个问题。
我的问题是我无法将导航栏 <li> 置于中心。我已经尝试了无数在互联网上找到的东西，甚至下载了一些模板来拼接。没有运气。我确定我只是遗漏了一些东西，但我希望 <li> 在导航栏中间轻拍，但我尝试过的所有方法要么让它们稍微偏离，将它们浮动到左侧，或使它们无法正确调整大小。
这是我的 HTML：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Blah blah blah</h1>
<!--START NAVBAR-->
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
</ul>
</div>
<!--STOP NAVBAR-->
<div class="content">
<p>
Lorem ipsum dolor sit amet...
</p>
<p>
Nullam pellentesque nunc luctus...
</p><p>
Donec sodales fermentum orci...
</p><p>
Ut venenatis tellus ...
</p><p>
Nullam quis molestie nunc...
</p>
</div>
</body>
和CSS：
body{
background-image:url("woodPatternShadow.png");
background-size:75% auto;
padding:0;
font-family:"Verdana";
}
.nav{
height:40px;
background-color:rgba(0,0,0,0.25);
left:0;
right:0;
box-shadow: inset 0 3px rgba(255, 255, 255, 0.4), inset 0 10px 4px rgba(255, 255, 255, 0.3),inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(28,0,0,0.3);
border:1px solid rgba(0,0,0,0.1);
margin:0;
position:absolute;
}
#fixNav{
position:fixed;
top:0px;
}
.nav ul{
}
.nav ul li{
}
.nav ul li a{
}
.content{
background-color:white;
border-radius:20px;
padding:10px;
width:70%;
margin:100px auto 0;
}
空的选择器是我想不通的地方。
有人可以帮我解决这个问题吗？
原文由 Aaa 发布，翻译遵循 CC BY-SA 4.0 许可协议
将
ul设置为text-align: center并在li元素上设置display: inline-block带有
display: inline-block的元素被视为内联元素，即使它们在大多数方面都像块元素一样，因此在容器上设置text-align: center将使内联元素居中li它的。显然，这是一个简单的功能性答案——您需要添加样式来调整
li和a元素的呈现。这段代码所做的只是删除默认项目符号并将li元素居中。