-2

私はCSSにかなり慣れていないので、事前にお詫び申し上げます。

簡単な問題があります。ウィンドウのサイズを変更すると、ナビゲーション ボタンが移動します。少なくとも 1 週間はこれを Google で検索しましたが、解決策が見つからないようです。サイズ変更で横に動かないようにできたのですが、なぜかウィンドウのサイズ変更で縦に動き続けてしまいます。なぜこれが起こっているのか本当にわかりません！誰か助けてくれませんか?! 前もって感謝します。

ここにHTMLがあります

`<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/experiment.css" type="text/css">
</head>
<body>
    <div id= "wrapper">
        <a href:"#" class= "button1"> Home </a>
        <a href:"#" class= "button2"> About </a>
        <a href:"#" class= "button3"> How it works </a>
        <a href:"#" class= "button4"> Pricing </a>
        <a href:"#" class= "button5"> Contact </a>
    </div>
</body>
</html>

CSSは次のとおりです。

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

.button1 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 20px;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif; 
    color: #789D6C;
    margin: 0px auto;
}

.button2 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 170px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button3 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 320px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button4 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 510px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button5 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 660px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif; 
    color: #789D6C;
}

スクロールバーのないサイトを作ろうとしています。（それが関連する場合に備えて）

4

1 に答える 1

1

HTML マークアップが間違っています。次のようにする必要があります。

<div id="wrapper">
    <a href="#" class="button1">Home</a>
    <a href="#" class="button2">About</a>
    <a href="#" class="button3">How it works</a>
    <a href="#" class="button4">Pricing</a>
    <a href="#" class="button5">Contact</a>
</div>

また、各ナビゲーション項目を絶対的に配置することは、ナビゲーション メニューを作成する上で最悪かつ最も困難な方法です。簡単なナビゲーション メニューを作成するためのいくつかの記事を参照することをお勧めします。ここにいくつかあります：

于 2013-08-19T19:10:24.210 に答える