0

ブラウザのサイズが変更されたときに 1 行で表示したい 2 つの div があります。すべての画面で 1 行で表示されますが、ブラウザのサイズが変更されると 2 行目に表示されます。

HTML

<div class="navbar" id="navbar">
    <a href="#" class="logo">
        <img src="logo.png">
    </a>
    <div class="topnav-con">
        <div class="menu-top-menu-container">
            <ul class="nav-menu" id="menu-top-menu">
                <li><a href="#">nav 1</a></li>
                <li><a href="#">nav 2</a></li>
            </ul>
        </div>                                  
    </div>
</div>

CSS

.navbar {
    .max-width: 1310px;
}
.logo {
    float: left;
    margin-left: 20px;
    margin-right: 25px;
}
.topnav-con {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #7A9CBD;
    clear: none;
    float: left;
    max-width: 1203px;
    width: 100%;
}
4

1 に答える 1

2

.topnav-con の幅を 100% にしないでください。

クラス.topnav-conと.logo

.logo{
    width: 20%;
}
.topnav-con{
    width: 80%;
}

ただし、navbar を表示している間は好ましくありません。ある程度まで比率を維持しmin-width: 600pxます。次に、メニューを次の行に分割します。

于 2013-10-09T14:18:45.980 に答える