0

这真的很令人困惑，我从来没有发生过这种情况。

对于我的电脑来说，没问题。但是对于我尝试过的其他任何人的计算机，它都搞砸了。

因此，在我的网站 designatease.com 上，第二个栏向下，它把第五个项目放在前四个之下。我不确定它为什么这样做。我希望他们跨越酒吧，但停在大约一半。帮我解决 SOF。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li><a href="index.html">Home</a></li>
<li><a href="coding.html">Coding</a></li>
<li><a href="graphics.html">Graphics</a></li>
<li><a href="database.html">Database</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="more.html">More</a></li>
</ul>
</div>
<ul id="quicklinks">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
</ul>
</body>
</html>

CSS

body{
background:#fffffc;
margin: auto auto;
}

#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}

#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}

#headerlinks li{
display:inline;
padding-left:25px;
}

#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}

#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}

#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}

.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-16px;
position:relative;
}

#quicklinks li{
display:inline;
}

#quicklinks li a{

}

#quicklinks li a:hover{

}

#wrapper{
width:80%;
height:100%;

}
4

2 回答 2

0

这与浏览器宽度有关。尝试抓住浏览器的边缘并将其移入和移出，以查看您的设计在不同画布尺寸上的效果。

问题是快速链接 div 与右浮动菜单发生冲突。利用：

#quicklinks {
  clear: right;
}

..在你的CSS中纠正这个问题。看起来您仍然需要计算一些垂直间距，但这会让您走上正确的轨道。有关清除此处的更多信息：http: //www.w3schools.com/cssref/pr_class_clear.asp

于 2013-06-27T22:24:45.887 回答
0

A clear: both;for#quichlinks解决了这个问题。

看起来，下面的集合将为您完成工作：

#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-16px;
position:relative;
}

希望能帮助到你

于 2013-06-27T22:41:10.760 回答