gpt4 book ai didi

html - sidenav 内容不对齐

转载 作者:行者123 更新时间:2023-11-28 13:26:49 25 4
gpt4 key购买 nike

我的 sidenav 中的内容不在其容器内。它在 jsfiddle 中看起来不错,但在我的浏览器中却不行。 (Firefox 17.1 Ubuntu Quantal) jsfiddle

<div id="page-wrapper">
<div id="header"></div>
<div id="content-wrapper">
<div id="content">
<h1>Title</h1>&nbsp
<p>lipsum...</p>
</div><!-- END content -->

<div id="menu-wrap">
<div id="menu">
<ul>
<li><a href="#">index</a>
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three in the list</a></li>
</ul>
</li>
</ul>
</div><!-- END menu -->
</div><!-- END menu-wrap -->

</div><!-- END content-wrap -->
<div id="footer"></div>
</div><!-- END page-wrapper -->

CSS

h1 {
font-size:34px;
text-align: center;
}

#header {
height: 35px;
width: 100%;
background-color: #336699;
position: fixed;
top: 0px;
z-index: 10;
}

#content-wrapper {
position: absolute;
top: 70px;
bottom: 50px;
left: 0px;
right: 0px;
}

#content {
width: 90%;
float: right;
padding-bottom: 50px;
padding-right: 30px;
line-height: 2em;
}

#menu ul li {
list-style-type: none;
}

#menu ul ul {
display:none;
position: fixed;
}

#menu ul ul a {
}

#menu ul a {
text-decoration: none;
color: black;
}

#menu ul li:hover ul {
display:block;
left: 0;
line-height: 20px;
width: 170px;
height: 400px;
background: #CCC;
border-top-right-radius:1em;
border-bottom-right-radius:1em;
padding-left: 22px;
text-align: left;
line-height: 35px;
padding-top:20px;
font-size: 14px;
}

#menu-wrap {
position:fixed;
top:50px;
width: 52px;
height: 22px;
border-top-right-radius: 6px;
border-bottom-right-radius:6px;
background: rgba(181,181,181,0.5);
text-align: center;
padding-top: 3px;
z-index: 0;
}

#footer {
height: 10px;
width: 100%;
background-color: green;
position: fixed;
bottom: 0px;
}

最佳答案

这就是你所需要的:

ul {padding: 0; margin: 0;}

关于html - sidenav 内容不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14061586/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com