爲什麼項目被放置在下面？

這真是令人困惑，我從來沒有發生過這種情況。爲什麼項目被放置在下面？

對於我的電腦，它很好。但對於其他人的電腦我已經嘗試過了，它會被搞砸了。

因此，在我的網站，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%; 

}

來源

2013-06-27 Adam DePolo

，什麼瀏覽器，你在其他電腦上檢查？ – Ryan

這與瀏覽器的寬度做。嘗試抓住瀏覽器邊緣並將其移入和移出，以查看不同畫布大小上的設計效果。

問題是快速鏈接div與右浮動菜單相沖突。使用：

#quicklinks { 
    clear: right; 
}

..在你的CSS來糾正這個問題。看起來你仍然有一些垂直間距可以解決，但是這會讓你走上正確的軌道。有關明確這裏：http://www.w3schools.com/cssref/pr_class_clear.asp

來源

2013-06-27 22:24:45

它的工作，謝謝你一堆！ –

A clear: both;爲#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-27 22:41:10

爲什麼項目被放置在下面？

回答

相關問題