Question

我已经创建了这个CSS，但是我得到的菜单已经离开了页面，我的宽度是100％，但是条形图大部分都在页面的右侧。任何人都可以帮忙吗？并使其宽度100％？适合页面。我只使用html和css。

HTML TAG

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

}

Answer 1

有一个拼写错误：

display: inline-black;

应该是：

display: inline-block;

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

Answer 2

看起来<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;
}

Demo

Answer 3

好的，首先，div#menu li的显示为inline-black。这不是一件事。我认为您正在寻找inline-block。

其次，你已经将你的酒吧的内容置于绝对的位置 - 意味着它忽略了东西，并且东西忽略了它（尽管它的位置是相对于它的容器）。如果您的栏位于页面的最左边，并且您的ul不在最左侧，则会转到屏幕的100％...＆＃ 39;宽度，而不是条的宽度，从而使其溢出。

换句话说，如果您的栏或ul不在边缘的最左边，ul会在屏幕外伸展，因为position:absolute会使其显示并不关心它的容器宽度。

尝试删除position:absolute。相对通常最适合这样的东西 - 相对将内容绑定到其容器，这意味着如果容器是500px，其内容是100％，则内容将超过页面宽度500px。

Answer 4

将position:relative;添加到div#menu和box-sizing: border-box;添加到div#menu ul

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>

菜单离开了页面

4 个答案: