Question

我有一个菜单，如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>

Answer 1

您设置了四个显式宽度，并且这些项目不合适，就像那样简单。

在片段中，我将它们两个评论出来，并缩小了字体大小和边距，并对两个项目进行了评论，以便小窗口中的代码片段显示正常。

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>

Answer 2

在ul＃nav li中将字体大小减小到24px，它会起作用。

ul#nav li {
  border: 1px solid black;
  border-radius: 5px;
  display: inline;
  padding: 10px;
  font-size: 24px;
  background-color: white;
  margin-right: 10px;
}

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

2 个答案: