个人中心
gpt4 book ai didi

html - 为什么我的菜单不起作用？

转载 作者：太空宇宙 更新时间：2023-11-04 08:44:45 24 4
gpt4 key购买 nike

我有一个菜单，如图所示 jsfiddle

谁能告诉我为什么它会被窃听。它昨天工作正常。它应该全部在一行上，但我不明白为什么最后一个按钮被切断了。

我已经尝试过 width:100% 但它没有用，所以宽度的数字只是我在尝试不同的东西。

我的代码也在下面

body {
  margin: 0px;
  width: 1510px;
}

#head {
  width: 1507px;
  height: 100px;
  background-color: #03A9F4;
}

#nav {
  background-color: #03A9F4;
  height: 40px;
  width: 1503px;
}

#menu {
  width: 1503px;
  height: 25px;
  background-color: #03A9F4;
  padding-top: 40px;
  direction: ltr;
}

ul {
  margin: 0px;
}

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 25px;
  background-color: white;
  margin-right: 10px;
}
<body>
  <form id="form1" runat="server">
    <div id="head">
      <div id="menu">
        <ul id="nav">
          <li><a href="Default.aspx">Home</a></li>
          <li><a href="addnew.aspx">Add new staff member</a></li>
          <li><a href="showall.aspx">Show all staff</a></li>
          <li><a href="changelocation.aspx">Change location of staff</a></li>
          <li><a href="editstaffdetails.aspx">Edit staff details</a></li>
          <li><a href="past24hours.aspx">Show past 24 hour locations</a></li>
          <li><a href="findbylocation.aspx">Find by location</a></li>
        </ul>
      </div>
    </div>
  </form>
</body>

最佳答案

您设置了四个显式宽度，但元素不适合，就这么简单。

在代码片段中，我将它们都注释掉了，并减小了字体大小和边距，并对两个元素进行了注释，这样代码片段在小窗口中看起来没问题。

body {
  margin: 0px;
 /* width: 1510px;*/
}

#head {
  /*width: 1507px;*/
  height: 100px;
  background-color: #03A9F4;
}

#nav {
  background-color: #03A9F4;
  height: 40px;
  /*width: 1503px;*/
}

#menu {
  /*width: 1503px;*/
  height: 25px;
  background-color: #03A9F4;
  padding-top: 40px;
  direction: ltr;
}

ul {
  margin: 0px;
}

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 10px;
  background-color: white;
  margin-right: 2px;
}
<body>
  <form id="form1" runat="server">
    <div id="head">
      <div id="menu">
        <ul id="nav">
          <li><a href="Default.aspx">Home</a></li>
          <li><a href="addnew.aspx">Add new staff member</a></li>
          <li><a href="showall.aspx">Show all staff</a></li>
          <!--<li><a href="changelocation.aspx">Change location of staff</a></li>-->
          <!--<li><a href="editstaffdetails.aspx">Edit staff details</a></li>-->
          <li><a href="past24hours.aspx">Show past 24 hour locations</a></li>
          <li><a href="findbylocation.aspx">Find by location</a></li>
        </ul>
      </div>
    </div>
  </form>
</body>

关于html - 为什么我的菜单不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43867493/

24 4 0
文章推荐： javascript - JS/jQuery : Reverse animate triggered by hover?
文章推荐： c - 链接一个特殊的共享库
文章推荐： python - python 中的快速循环缓冲区比使用 deque 的循环缓冲区？
文章推荐： c - 使用 fscanf 从文件中读取