2

Foundationを使用して、Webサイトのナビゲーションバーを構築しようとしています。ただし、試してみると、メニュー バーの項目が逆の順序で表示されるようになりました。右側には、「連絡先についてのポートフォリオ」というよりも、「ポートフォリオについての連絡先」と書かれています。何か案は？

HTML:

<div id="header-container">
        <div id="header" class="row">   
            <nav class="nav-bar">
                <ul class="left">
                    <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>
                </ul>
                <ul class="right">
                    <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>
                    <li data-slide="3" class="about"><a href="">about</a></li>
                    <li data-slide="4" class="contact"><a href="">contact</a></li>
                 </ul>
            </nav>
        </div><!--end header-->
    </div><!--end header-container-->

CSS:

div#header ul{
    height: 128px;
    list-style-type: none;
}
div#header ul li {
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;         
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    display: inline;
    padding: 0;
    margin: 0;
}
li.andrewgu {
    width: 200px;
    font-size: 60px;
}
li.portfolio {
    float: right;
    font-size: 30px;
    width: 140px;
}
li.about {
    float: right;
    font-size: 30px;
    width: 110px;
}
li.contact {
    float: right;
    font-size: 30px;
    width: 130px;
}

ウェブサイト: http://andrewgu12.kodingen.com/ 助けていただければ幸いです。

4

3 に答える 3

0

「float」を入れた場合は常に覚えておいてください

  • メニューの順番が逆になるので、タグやメインにfloat値を書くのがデフォルトの配置です。

    • 于 2021-05-14T11:31:02.503 に答える