0
私がここでやっていることが完全にばかげているなら、申し訳ありません。なぜ私のメニューは左いっぱい進むのではない
私はHTMLとCSSを使用して非常に基本的なウェブサイトを構築しています。私は2つのナビゲーションバーを使いたい。メインナビゲーション用の画面上部に1つ。そして、その特定のページをナビゲートするための左側に1つ。最初の1つはうまくいくが、2つ目は奇妙に見える。クリック可能なリンクはさらに左に移動することはできず、したがって右に突き出ています。私は "content2" 私が間違っているのは何
で私のマウスでホバリングしてい
：これは私が何を意味するかですか？
<body>
<nav>
<ul class="navbar">
<li class="navbar"><a class="navbar active" href="index.html">home</a></li>
<li class="navbar"><a class="navbar" href="page1.html">page 1</a></li>
<li class="navbar"><a class="navbar" href="page2.html">page 2</a></li>
<li class="navbar"><a class="navbar" href="page3.html">page 3</a></li>
<li class="navbar"><a class="navbar" href="page4.html">page 4</a></li>
</ul>
</nav>
<div id="contentbar">
<ul class="ucontentbar">
<li class="contentbar"><a class="contentbar" href="#">content1</a></li>
<li class="contentbar"><a class="contentbar" href="#">content2</a></li>
<li class="contentbar"><a class="contentbar" href="#">content3</a></li>
<li class="contentbar"><a class="contentbar" href="#">content4</a></li>
<li class="contentbar"><a class="contentbar" href="#">content5</a></li>
<li class="contentbar"><a class="contentbar" href="#">content6</a></li>
<li class="contentbar"><a class="contentbar" href="#">content7</a></li>
</ul>
</div>
<div id="page">
<p>text</p>
</div>
</body>
とそれに行くCSS：
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: rgb(50,50,50);
font-family: sans-serif;
font-size: 20px;
height: 60px;
width: 100%;
}
ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: right;
position: fixed;
}
li.navbar{
float: left;
height: 60px;
}
a.navbar {
display: inline-block;
padding: 19px 25px;
background-color: rgb(50,50,50);
text-align: center;
color: white;
text-decoration: none;
}
a.navbar:hover {
background-color: black;
}
a.active {
background-color: rgb(80,80,220);
}
#contentbar {
background-color: rgb(100,100,100);
font-family: sans-serif;
font-size: 14px;
width: 300px;
height: 100%;
display: block;
position: absolute;
}
ul.contentbar {
margin: 0;
padding: 0;
}
li.contentbar {
list-style: none;
}
a.contentbar {
left: 0;
background-color: rgb(100,100,100);
color: white;
display: block;
width:300px;
height: 30px;
text-decoration: none;
}
a.contentbar:hover {
background-color: black;
}
#page {
background-color: rgb(0,200,100);
width: 100%;
height: 100%;
}
最初にデモを作成することなく、デフォルトのマージンとパディングのように見えます。 –
#contentbarに 'overflow：hidden'を設定することもできます。これにより、子供たちがあふれ出るのを防ぐことができます。 – kkalamarski
..または幅を指定しないでください。コンテナは幅を持ち、子供に同じ幅を与える必要はありません。それでも問題はありません。 –