菜单超出页面范围

Question

菜单超出页面范围

3

我已经创建了这个CSS，但是我的菜单超出了页面范围，虽然我的宽度设置为100%，但是菜单条大部分都向右侧溢出了页面。有人可以帮忙吗？将其宽度设置为100%，适应整个页面。我只使用HTML和CSS。

HTML标记

<div id="menu">
        <ul>
            <li>Hotels</li>
            <li>Top Destinations</li>
            <li>Tours & Activities</li>
            <li> Vacations Packages</li>
            <li> Flights</li>
        </ul>
     </div>

CSS（层叠样式表）

div#menu li{
    list-style: none;
    display: inline-black;
    margin-right: 30px;
    font-size: 20px;
    color: #fff;
    float: left;
    border-right: 2px solid #fff;
    padding-right: 30px;
    text-transform: uppercase;
    margin-left: 0px;
}
div#menu li:last-child{
    border-right: none;
}
div#menu ul{
    background-color: #04b3ae;
    color: #fff;
    height: 50px;
    width: 100%;
    padding-top: 20px;
    margin-top: 10px;
    position: absolute;

}

- Mohamed Abdullahi Salah

你的HTML在哪里？ - Aer0

请再次检查并提供建议。 - Mohamed Abdullahi Salah

有没有使用Bootstrap的机会？ - Aer0

当我尝试相同的操作时，情况并非如此...请告诉我们它发生在哪里以及何时。 - Geeky

我的菜单栏在页面中间，但是没有任何与此菜单相关的内容。 - Mohamed Abdullahi Salah

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scopo · Answer 1

首先，div#menu li 的显示方式是 inline-black，但这不是有效的设置。我认为您想要使用 inline-block。

第二点，您已将栏的内容绝对定位-- 这意味着它忽略其他元素，而其他元素也会忽略它（尽管其位置是相对于其容器的）。如果您的栏不在页面的最左边，您的 ul 也不在最左边，那么它将会占用整个屏幕的宽度，而不是栏的宽度，从而导致溢出。

换句话说，如果您的栏或者 ul 不在页面的最左边，ul 将会延伸到屏幕外面，因为它的 position:absolute 让它不会真正关心其容器的宽度。

尝试删除 position:absolute，通常使用相对定位（Relative）最合适-- 相对定位将内容绑定到其容器，这意味着如果容器宽度为 500px，其内容为 100%，则内容将超过页面的宽度 500px。

- GvM · Answer 2

在你的 div#menu 中添加 position:relative;，并在你的 div#menu ul 中添加 box-sizing: border-box;

div#menu {
    position: relative;
}
div#menu li{
    list-style: none;
    display: inline-block;
    margin-right: 30px;
    font-size: 20px;
    color: #fff;
    float: left;
    border-right: 2px solid #fff;
    padding-right: 30px;
    text-transform: uppercase;
    margin-left: 0px;
}
div#menu li:last-child{
    border-right: none;
}
div#menu ul{
    background-color: #04b3ae;
    color: #fff;
    height: 50px;
    width: 100%;
    padding-top: 20px;
    margin-top: 10px;
    position: absolute;
    box-sizing: border-box;
}

<div id="menu">
        <ul>
            <li>Hotels</li>
            <li>Top Destinations</li>
            <li>Tours & Activities</li>
            <li> Vacations Packages</li>
            <li> Flights</li>
        </ul>
     </div>

- Amaury Hanser · Answer 3

有一个错别字：

display: inline-black;

应该是：

display: inline-block;

但是为什么要使用inline-block和float呢？

- Aer0 · Answer 4

看起来你的 <ul> 元素的填充导致了这个问题。你可以将其设置为 padding-left: 0;。只需像这样更新你的样式：

div#menu ul {
  background-color: #04b3ae;
  color: #fff;
  height: 50px;
  width: 100%;
  padding-top: 20px;
  padding-left: 0; <-------- Update
  margin-top: 10px;
  position: absolute;
}

演示