Question

我正在开发一个aspx母版页，即使宽度加起来达到100％，我的导航栏也会被包围。什么是抛弃这个，我已经在其他项目上工作了吗？

段：

        /*General Styling*/

        html,
        body {
          margin: 0;
          padding: 0;
          height: 100%;
        }
        #wrapper {
          min-height: 100%;
          position: relative;
        }
        .clear:before,
        .clear:after {
          content: " ";
          display: table;
        }
        /*Header Styling*/
        /*Banner Styling*/
        #banner {
          text-align: center;
          border-bottom: 1px solid purple;
        }
        #banner h1 {
          color: blue;
        }
        #banner h5 {
          color: red;
        }
        /*Nav Styling*/
        #nav {
          height: 100px;
          border-bottom: 1px solid black;
        }
        .nav-item {
          margin: 0;
          padding: 0;
          display: block;
          list-style-type: none;
          height: 100%;
        }
        .nav-child {
          overflow: hidden;
          font-size: 15px;
          border-right: 1px solid green;
          float: left;
          height: 100%;
          text-align: center;
          width: 16%;
        }
        .nav-child:first-child {
          width: 20%;
        }
        /*Content Styling*/
        #content {
          padding-bottom: 35px;
        }
        /*Footer Styling*/
        #footer {
          width: 100%;
          border-top: 1px solid orange;
          height: 35px;
          position: absolute;
          bottom: 0;
          left: 0;
        }

<!-- Start Wrapper -->
<div id="wrapper">
  <!-- Start Header -->
  <div id="header">
    <div id="banner">
      <h1>BETTER</h1>
      <h5>Battling Elemental Titans Through Exercise Training</h5>
    </div>
    <!-- Start Navigation Bar -->
    <div id="nav" class="clear">
      <ul class="nav-item">
        <li class="nav-child">
          <asp:label ID="exercisePointLabel" runat="server">EP: 500</asp:label>
          <br />
          <a href="#" runat="server">Add Exercise Points</a>
        </li>
        <li class="nav-child">
          <a href="home.aspx" runat="server">Home</a>
        </li>
        <li class="nav-child">
          <a href="battle.aspx" runat="server">Battle</a>
        </li>
        <li class="nav-child">
          <a href="hallOfLegends.aspx" runat="server">Hall of Legends</a>
        </li>
        <li class="nav-child">
          <a href="settings.aspx" runat="server">Settings</a>
        </li>
        <li class="nav-child">
          <a href="~/account/login.aspx" runat="server">Logout</a>
        </li>
      </ul>
    </div>
    <!-- End Navigation Bar -->
  </div>
  <!-- End Header -->

  <!-- Start Content -->
  <div id="content">
    <!-- Start Titan Sidebar -->
    <div id="titans">
      <div class="titan-block">titan block</div>
      <div class="titan-block"><a href="#" runat="server">+<br /><span class="createTitan">(create new titan)</span></a>
      </div>
      <div class="titan-block"><a href="#" runat="server">+<br /><span class="createTitan">(create new titan)</span></a>
      </div>
      <div class="titan-block"><a href="#" runat="server">+<br /><span class="createTitan">(create new titan)</span></a>
      </div>
    </div>
    <!-- End Titan Sidebar -->
    <!-- Start Content Placeholder -->
    <form id="form1" runat="server">
      <div id="body">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
      </div>
    </form>
    <!-- End Content Placeholder -->
  </div>
  <!-- End Content -->

  <!-- Start Footer -->
  <div id="footer">
    <div class="footer-text">&copy; 2016</div>
  </div>
  <!-- End Footer -->
</div>
<!-- End Wrapper -->

如果有人可以请求帮助，这将是惊人的。这真让我抓狂。我正在尝试建立一个网站，其中横幅显然是一个横幅，带有标题和副标题。其次是导航栏，其中第一个孩子的信息框比其他孩子略宽，有5个真实的导航元素。

然后是内容，其中包含一个左对齐的“titan”部分，它占据了页脚的100％高度，右对齐的“内容占位符”部分，也是100％高度到页脚

Answer 1

这是你拥有的border-right。

您应该添加box-sizing: border-box;来解决此问题。

.nav-child {
    overflow:hidden;
    font-size:15px;
    border-right:1px solid green;
    float:left;
    height:100%;
    text-align:center;
    width:16%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Answer 2

这是另一个解决方案。在css文件中替换此样式：

.nav-child:first-child {
 /* width: 20%;  Remove this style */
}


.nav-item {
    display: table;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav-child {
    border-right: 1px solid #008000;
    display: table-cell;
    font-size: 15px;
    height: 100%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    width: 1%;
}

演示：https://jsfiddle.net/4bfg0p18/2/

CSS Navbar Breaking（宽度100％，环绕到下一行）

2 个答案: