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

【问题标题】：navigation menu creating extra unwanted space导航菜单创建额外的不需要的空间
【发布时间】：2017-11-30 01:30:04
【问题描述】：

我创建了一个导航菜单，它不必要地在其右侧添加了额外的空间。当页面变小时，它会在页面底部添加一个滚动条，从而使页面不居中。在 Dreamweaver 中进行了一些挖掘之后，看起来 UL 元素的周围框未与实际导航菜单居中。它向右突出，似乎是造成问题的原因。如何让导航菜单居中？

我还在下面添加了一个小提琴。

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;
}

<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>

View on JSFiddle

【问题讨论】：

标签： css html-lists nav

【解决方案1】：

只需在您的nav 中添加溢出属性：

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

【讨论】：

【解决方案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自动；” 自动将导航自动居中

【讨论】：

【解决方案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;
      }
}

【讨论】：