Question

我创建了一个导航菜单，不必要地在其右侧添加额外的空间。当页面变小时，它会在页面底部添加一个滚动条，使页面不受影响。在Dreamweaver中进行一些挖掘后，看起来UL元素的周围框不会与实际的导航菜单对齐。它突然向右移动，似乎导致了问题。如何以导航菜单为中心？

我还包括一个小提琴。

＆＃13;

nav {
    float: left;
    width: 100%;
}
  
ul {
    float: left;
    list-style: none;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
}
ul li {
    display: block;
    float: left;
    list-style: none;
    position: relative;
    right: 50%;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;
    color: white;
    line-height: 1.3em;
}
.main-nav li a:hover {
    border: solid 1px black;
}
  
a {
    color: black;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    border: solid 1px transparent;
    padding: 5px 10px;
}

＆＃13;

<nav class="nav">
    <ul class="main-nav">
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="music.html">MUSIC</a></li>
        <li><a href="https://svuvn.bandcamp.com/">STORE</a></li>
        <li><a href="live.html">LIVE</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
<nav>

＆＃13;

View on JSFiddle

Answer 1

只需添加nav溢出属性：

nav {
    float: left;
    width: 100%;
    overflow-x: hidden;
}

Answer 2

似乎菜单项之间的填充太多了。把它放在css区块中：

ul li {
    display: block;
    float: left;
    list-style: none;
    position: relative;
    right: 50%;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;  //first parameter is top/bottom, the second parameter is left/right.  kick it down to something like 5px 10px;
    color: white;
    line-height: 1.3em;
}

取出右边：50％;对于保证金，请使用“保证金：0自动;” auto会自动居中导航

Answer 3

您不应使用浮动或左侧来对齐导航栏。而是尝试这样做：它使导航栏居中，并且不会出现小型设备的滚动。将您的ul和li类更新为：

ul {
    list-style: none;
    padding: 0;
    position: relative;
    text-align: center;
  }

  ul li {
    display: inline-block;
    list-style: none;
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;
    color: white;
    line-height: 1.3em;
    text-align: center;
  }

此外，如果您希望导航栏以小型设备的列表形式显示，只需将此媒体查询添加到您的首选范围：

@media (max-width: 480px) {

 ul li {
        display: block;
        list-style: none;
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 5px 30px;
        color: white;
        line-height: 1.3em;
        text-align: center;
      }
}

导航菜单创建额外的不需要的空

3 个答案: