gpt4 book ai didi

html - 菜单不在位

转载 作者:行者123 更新时间:2023-11-28 13:40:45 24 4
gpt4 key购买 nike

我有一个非常奇怪的 html 问题。我的主菜单不在原位。

<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">content</a></li>
<li><a href="#">search</a></li>
<li><a href="#">more</a></li>
</ul>
<div id="clear"></div>
</div>

<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>

<div id="forms">
<form>
<input type="text" name="submit" size="78" style="font-size:20pt;"/>
</form>
</div>
</div>

</body>
</html>

这是CSS

body {
margin: 0;
padding: 0;
background-color: white;
}

h1,h2,h3 {
margin: 0;
padding: 0;
}

p,ul,ol,li {
margin: 0;
padding: 0;
}

#outer {
background-color: rgb(67,68,71);
}

#outer ul {
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}

#outer li {
float: left;
}

.current {
background-color: rgb(56,63,137);
}

#outer a {
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}

#outer a:hover {
color: black;
background-color: white;
}

#outer .current a:hover {
color: white;
background-color: inherit;
}

#clear {
clear: both;
}

#wrapper {
width: 960px;
margin: 0 auto;
}

#pic {
margin-top: 100px;
margin-left: 389px;
position: relative;
}

#content {
position: absolute;
top: 60px;
left: 90px;
}

#forms {
margin-top: 50px;
}

现在您可能会问,为什么我在编码的早期阶段没有注意到我的菜单没有放置。好吧,问题是我在编码期间在包装器 div 上使用了边框,一切都已到位,但是一旦我删除了边框,整个事情就崩溃了。

我认为这与未正确清除 float 导致 pic div 弄乱一切有关。非常感谢您的建议。

谢谢。

最佳答案

我不知道你所说的“不在原位”是什么意思,但是删除边框表明你对 collapsing margins 有疑问。 .

如果是这种情况,您可以通过在删除边框的规则中添加 overflow: autopadding: 1px 0 来解决它。

关于html - 菜单不在位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12437837/

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