Css 菜单正在退出页面

我已经创建了这个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>

有一个输入错误：

display: inline-black;

应该是：

display: inline-block;

---

但是为什么要使用内联块和浮点呢？

看起来是

元素上的填充造成的。您可以将其设置为

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

div#菜单ul{
背景色：#04b3ae；
颜色：#fff；
高度：50px；
宽度：100%；
填充顶部：20px；
左侧填充：0；好的，首先，
div#menu li
的显示是
内联黑色
。这不是问题。我想您正在寻找
内联块

其次，你已经将你的酒吧的内容设置为绝对定位——这意味着它忽略了东西，而东西也忽略了它（尽管它的位置是相对于它的容器的）。如果您的栏不在页面的最左边缘，并且您的
ul
不在页面的最左边缘，则它将变为屏幕宽度的100%，而不是栏的宽度，从而使其溢出

换句话说，如果您的条形码或
ul
不在边缘的最左侧边缘，则
ul
将伸出屏幕，因为它的
位置：绝对
使它实际上不关心容器的宽度

尝试删除
位置：绝对
。Relative通常最适合这样的东西——Relative将内容绑定到它的容器，这意味着如果容器是500px，并且它的内容是100%，那么内容在页面宽度上将是500px。
将
位置：相对；
添加到
div>菜单和
框大小：边框框；
到您的
div#菜单ul


div#菜单{
位置：相对位置；
}
div#menu li{
列表样式：无；
显示：内联块；
右边距：30px；
字体大小：20px；
颜色：#fff；
浮动：左；
右边框：2px实心#fff；
右侧填充：30px；
文本转换：大写；
左边距：0px；
}
李：最后一个孩子{
边界权：无；
}
div#菜单ul{
背景色：#04b3ae；
颜色：#fff；
高度：50px；
宽度：100%；
填充顶部：20px；
边缘顶部：10px；
位置：绝对位置；
框大小：边框框；
}


旅馆
顶级目的地
旅游与活动
度假套餐
飞行

你的HTML在哪里？再加上PLS检查并建议是否使用Bootstrap？当我尝试同样的情况时……请让我们知道它在哪里发生，当我的菜单栏在页面的中间，但是没有一个与这个Munuiffi相关的，我不使用内联块，那么菜单将是从上到下而不是从左到右。是的，它是内联块，我已将其替换为position:relative；但没有任何更改我想你的意思是padding left:0px，我已添加padding left:0px；但它产生了另一个问题，没有任何解决方案根据您的代码片段，菜单从其父菜单溢出。删除填充（左侧）刚刚为我解决了问题，现在它不再溢出了。我想这会为你解决问题。你能提供一把小提琴来完全展示你的问题吗？因为正如我所说，你的代码片段，打包在一起，效果很好。当然没有填充。小提示：
padding:0
等于
pa添加：0px
div#menu ul {
  background-color: #04b3ae;
  color: #fff;
  height: 50px;
  width: 100%;
  padding-top: 20px;
  padding-left: 0; <-------- Update
  margin-top: 10px;
  position: absolute;
}