gpt4 book ai didi

html - 我的导航栏没有垂直跨越以适合父 div。为什么?

转载 作者:行者123 更新时间:2023-11-28 17:51:29 25 4
gpt4 key购买 nike

http://acjdesigns.com

我在 wordpress 上使用子主题,出于某种原因,导航栏不适合 div“标题”。我尝试了所有部分的 height: 100% 。

.main-nav {
float: right;
border: none;
position: relative;
margin: 0px auto;
padding: 0px;
clear: none;
height: 100%;
}
.menu, .menu ul {
text-decoration: none;
text-shadow: 0px;
margin: 0px auto;
padding: 0px;
clear: none;
height: 100%;
}
.menu li a:link {
border: none;
color: #353535;
background-color: white;
text-transform: lowercase;
font-family:'Open Sans', sans-serif;
text-shadow: 0px 0px 0px;
font-weight: normal;
font-size: 15px;
background-image: none;
}
.menu li a:visited {
border: none;
color: #353535;
background-color: white;
text-transform: lowercase;
font-family:'Open Sans', sans-serif;
text-shadow: 0px 0px 0px;
font-weight: normal;
font-size: 15px;
background-image: none;
}
.menu li a:hover {
border: none;
color: DeepPink;
text-transform: lowercase;
background-color: white;
font-family:'Open Sans', sans-serif;
text-shadow: 0px 0px 0px;
font-weight: normal;
font-size: 15px;
background-image: none;
}
.menu li a:active {
border: none;
color: DeepSkyBlue;
text-transform: lowercase;
background-color: white;
font-family:'Open Sans', sans-serif;
text-shadow: 0px 0px 0px;
font-weight:normal;
font-size: 15px;
background-image: none;
}

根据请求,HTML:

<div id="header">       
<div id="logo">
<a href="http://acjdesigns.com/"><img src="http://acjdesigns.com/wp-content/uploads/2014/01/cropped-copy-Logo-012.png" width="250" height="54" alt="ACJ Designs"/></a>
</div><!-- end of #logo -->
<div class="main-nav">
<ul class="menu">
<li class="current_page_item"><a href="http://acjdesigns.com/">Home</a></li>
<li class="page_item page-item-34"><a href="http://acjdesigns.com/bio">bio</a></li>
<li class="page_item page-item-39"><a href="http://acjdesigns.com/graphics">graphics</a></li>
<li class="page_item page-item-101"><a href="http://acjdesigns.com/photography-2">photography</a></li>
<li class="page_item page-item-41"><a href="http://acjdesigns.com/other-works">other works</a></li>
</ul>
</div>
</div><!-- end of #header -->

我没有将标题 div 设置为高度,所以这可能是问题所在?任何帮助都会很棒。提前致谢!

最佳答案

您有两种通用方法:在 all elements down from body 上设置 height:100%;

html {height:100%;}
body {height:100%;}
...
#header {height:100%;}

使用absolute positioning

#header{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 400px;
}
/* you must now move your content out of the way of the header, or it will sit on top */

#content{
margin-left: 420px;
}

关于html - 我的导航栏没有垂直跨越以适合父 div。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22234186/

25 4 0