为什么我的菜单不工作？

谁能告诉我为什么它的错误。它昨天正常工作。它应该是在一条线上，我不知道为什么最后一个按钮被切断。

我已经试过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>

来源

2017-05-09 DJGB

你有四个明确的宽度设置，并且项目不适合，就这么简单。

在片段中，我评论了两者，并减小了字体大小和边距，并对两个项目进行了评论，因此片段在小窗口中显示正常。

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>

来源

2017-05-09 10:39:13 mayersdesign

就减小字体大小UL＃导航李书福24PX，它会工作。

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

来源

2017-05-09 10:47:41

为什么我的菜单不工作？

回答

相关问题