Question

导航栏似乎以我的15英寸笔记本电脑为中心。但是当我在27英寸的Mac上观看它时，它漂浮在左边，它偏离中心。我并不完全确定如何将其集中在一起，因此它似乎集中在所有显示器上。

.navContainter{
    width: 960px;
}
.nav {
    height:60px;
    background-color: rgba(0, 0, 0, 0.7);
    position: -webkit-sticky;
    list-style-type: none;


}


.nav ul {
    float: left;
    margin: 0 auto;
    padding-left: 0px;
    padding-top: 10px;

}


ul{
    display: inline;
    padding: 0;





}

li{
    display:inline;
    padding:5px;
    font-size: 1.5em;
    float: left;
    margin-right: 50px;
    margin-left: 100px;
    position: relative;
    font-family: "Josefin Slab",serif;

}



a{
    width:60px;
    color: #fff;

}



.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

<head class="navContainer">
<nav class="nav">


        <ul>
          <li><a href="web.html">WEB</a></li>
          <li><a href="photo.html">PHOTOGRAPHY</a></li>
          <li><img src="img/demo/_small/logo.png"></li>
          <li><a href="design.html">DESIGN</a></li>
          <li><a href="video.html">VIDEO</a></li>

        </ul>
        </nav>

Answer 1

.nav添加text-align: center;

.nav ul删除float: left;并添加display: inline-block;;

粘性导航不会对齐中心

1 个答案: