0

ナビゲーションバー全体を作成しましたが、すべてが完璧ですが、ナビゲーションバーメニューの後の右側の砂のボタンが次の行に押し下げられ、ナビゲーションバー全体がめちゃくちゃになり、非常に厚くなります.

すべてのコードを分離しました。非常にきれいに見えると思います。

それは私のindex.htmlです

<html>
<head>
    <meta charset="utf8" />
    <title>My about page</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <header>
        <div class="wifi">
            <img src="img/wifi.gif" alt="Wi-Fi" />
        </div>
        <div class="opcoes">
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Casa</a></li>
                <li><a href="#">Quartos</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>

        <div class="flags">
            <ul>
                <li>
                    <img src="img/flag_en.gif" alt="English" />
                </li>
                <li>
                    <img src="img/flag_pt.gif" alt="Português" />
                </li>
            </ul>
        </div>
    </header>

</body>
</html>

そして、これは私のstyle.cssです

body {
    margin: 0;
}

header {
    overflow: hidden;
}

header{
    text-align: center;
    background: #C07D41;
}

.opcoes li{
    display: inline;
}

.opcoes li:after{
    content:'|';
    padding: 0 8px;
} 

.opcoes li:last-child:after{
    content: none;
}

.wifi{
    float: left;
    padding: 13px 8px;
}

.flags li{
    display:inline;
    float:right;
    padding: 0 8px;
}

助けていただければ幸いです。本当に行き詰まっています。左右と中央のナビゲーション バーにアイコンが必要です。この方法で可能ですか、それともテーブルを使用する必要がありますか? 本当にわからない、何時間もこれに取り組んでいる。

ありがとうございました

4

2 に答える 2

1

クラスの css で float left を使用し、クラス.opcoesで float right を使用します。.flags

またはそれらを作るdisplay:inline-block;

于 2013-07-21T01:01:54.343 に答える