1

HTML と CSS、ナビゲーション バーを使用して基本的なサイトを作成しようとしていますが、問題があります [以下]: 

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}


<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div> 
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>

<!-- More DIVs in the container -->

</div>

問題は、すべてのナビゲーション ボタンが一列に並んでいるのではなく、互いに重なり合っていることです。私は何を間違っていますか？

ページの問題

4

4 に答える 4

3

それらを div にする代わりに、リスト内でアンカー タグを使用します。画像と完全な作業コードは次のとおりです。

ここに画像の説明を入力

<html>
<head>
<style>

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}


a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}

</style>
</head>

<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > <a href="#">  Home </a></li>
<li id="navigation_button_2" > <a href="#">  About </a></li>
<li id="navigation_button_3" > <a href="#">  Services </a></li>
<li id="navigation_button_4" > <a href="#">  Contact </a></li>
</ul>
</div>

<!-- More DIVs in the container -->

</div>
</body>
</html>
于 2013-11-16T10:04:07.497 に答える
1

問題は、divs がブロック要素であるため、自然に互いの上に配置されることです。いくつかの方法を使用して、それらを動作させることができます。ほとんどの場合、クラスに a を適用するdisplay: inline-blockことをお勧めします。.navigation_buttonただし、この場合、 afloat: leftも同様に機能します。

2 つの方法にはそれぞれ長所と短所がありますが、float は (同様に) 非 float 要素に対して本質的に認識できなくなるため、問題になる可能性がありposition: absoluteます。

余談ですが、もし私があなただったら、heightコンテナを取り外して に変更し#navigation_holder、個々のナビゲーション要素から s (場合によってはクラスも!) を取り外します。内部の sを完全に取り出して、whoreに置き換えることもできます (よりセマンティックになります)。<nav>iddivullidisplay: inline

次に、次のように参照できます。

.navigation_holder ul li {
    display: inline;
    padding-left: 40px; /* or whatever */
}

最初または最後のみをターゲットにする必要がある場合は、次のようにします。

.navigation_holder ul li:first-of-type {
    // styles
}

.navigation_holder ul li:last-of-type {
    // styles
}

から既定のスタイルをポップするにはul:

.navigation_holder ul {
    list-style-type: none;
}
于 2013-11-16T09:59:47.207 に答える
0

<ul>タグとタグを使用しないのはなぜ<li>ですか? の方がいいと思います。次に、CSS で次を使用する必要があります。

display: inline

一例: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

于 2013-11-16T09:43:59.443 に答える