0

ページの上部にあるこのメニュー バーが正しく配置されていません。

リンクは、同じ高さになるようにバーに合わせて配置することを意図しています。

例はこちら。

HTML:

<html>
<head>
<title>DatNerd - Home</title>
<!--External Javascripts-->
<script src="externals/javascript/jquery-1.8.3.js"></script>
<script src="externals/javascript/jquery-ui.js"></script>
<script src="externals/javascript/jquery.cookie.js"></script>
<script src="externals/javascript/animated-hover.js"></script>
<script src="externals/javascript/javascript.js"></script>
<script src="externals/javascript/mobdetect.js"></script>
<!--External CSS-->
<link rel="stylesheet" href="externals/css/main.css" />
<link rel="stylesheet" href="externals/css/jquery-ui.css" /></head>
<body>

<div id="toolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">Projects</a></li>
</ul>
</div>

</body>
</html>

CSS:

#toolbar
{
background: #b2b2b2; /* Old browsers */
background: -moz-linear-gradient(top,  #b2b2b2 2%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#b2b2b2), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b2b2b2 2%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
width:100%;
height:40px;
position:fixed;
top:0;
left:0;
line-height:40px;
}

#toolbar ul
{
list-style-type:none;
}
#toolbar a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
height:100%;
text-align:center;
}

#toolbar a:hover
{
background-color:#ff3300;
}

#toolbar li {
display:inline;
}
4

4 に答える 4

1

これを試して：

#toolbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
于 2012-12-29T12:54:01.937 に答える
1

ul のマージンとパディングを 0 に設定する必要があります。ブラウザ (ユーザー エージェント) にはデフォルトのスタイルがあります。ul の場合、これには margin、padding、list-style などが含まれます。list-style-type はクリアしましたが、他には何もありません。

#toolbar ul {
    padding: 0;
    margin: 0;
}

ブラウザで F12 を押して、開発者ツールを起動します。ここで、要素を調べて、問題のある CSS を見つけることができます。FireFox を使用している場合は、FireBug をインストールする必要がある場合があります。他の主要なブラウザーには、開発ツールがプリインストールされています。

于 2012-12-29T12:51:43.100 に答える
1 
#toolbar ul {
  margin: 0;
  padding: 0;
}

一般に、スタイルシートのリセットが役立つ場合があります。

于 2012-12-29T12:52:57.237 に答える
0

これを css に貼り付けてください。UL リストを作成するときに、箇条書きなどを止めるのに役立ちます。

ol, ul{list-style:none;}
于 2012-12-29T13:20:16.093 に答える