我正在处理一个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">© 2016</div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
如果有人能帮忙,那就太棒了。这简直把我逼疯了。我正试图建立一个网站,横幅显然是一条横幅,有标题和副标题。然后是一个导航栏,第一个孩子是一个比其他孩子稍宽的信息框,有5个真正的导航元素。
然后是内容,它由一个左对齐的"titan"部分组成,该部分占据页脚以下100%的高度,还有一个右对齐的"内容占位符"部分,也占据页脚以下的100%的高度。
这是您拥有的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;
}
这里有另一个解决方案。在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/