gpt4 book ai didi

html - 中间的导航位置

转载 作者:行者123 更新时间:2023-11-28 12:21:12 26 4
gpt4 key购买 nike

我在让导航在其容器中间正确对齐时遇到了一些问题。我认为将 margin-left 和 margin-right 设置为 auto 会有所帮助,但在某些屏幕上(和浏览器它仍然不正确,显然太左了。)

它下方的 1px 边框在 Chrome 上看起来不错,但在 Firefox 上填充太多。

这是页面:http://www.mangdevelopment.co.uk/ghfurnishings/index.html

<section id="navigation">
<div class="container">
<div class="row">
<div id="navigation-container">
<div class="span12">
<!-- Start Navigation Bar -->
<nav class="nav">
<ul>
<li class="bullet-point"><a href="index.html" class="active">HOME</a></li>
<li class="bullet-point"><a href="projects.html">PROJECTS</a></li>
<li class="bullet-point"><a href="#">CASE STUDIES</a></li>
<li class="bullet-point"><a href="profile.html">PROFILE</a></li>
<li class="bullet-point"><a href="#">NEWS &#38; EVENTS</a></li>
<li class="bullet-point"><a href="location.html">LOCATION</a></li>
<li class="bullet-point"><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<!-- End Navigation Bar -->
</div>
</div>
</div> <!-- End of row containing navigation -->
</div>

CSS

#navigation-container {
border-top: 1px solid #9d9f96;
border-bottom: 1px solid #9d9f96;
padding-top: 10px;
padding-bottom: 50px;
}

.nav {
margin-bottom: 30px;
}

.nav a {
color: #9d9f96;
}

.nav a.active {
color: #636763;
}

.nav li {
display: inline;
list-style-type: none;
padding-right: 15px;
font-size: 1.1em;
font-family: "Copperplate Gothic Light";
}

.nav ul {
width: 900px;
}

.nav ul li a {
text-decoration: none;
}

.nav ul li a:hover, ul li a:focus {
color: #636763;
}

.bullet-point {
margin-top: 0px;
margin-right: 0px;
list-style:none;
float:left;
}
.bullet-point:after {
content:" • ";
margin-left: 7px;
}
.bullet-point:last-child:after {
content: "";
padding-right: 0px;
}

最佳答案

试试这个 CSS。这会很好用

.nav ul {
width:768px;
margin:0px auto;
}

关于html - 中间的导航位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18848555/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com