如何製作標題左側的徽標和右側的導航？

我想將標題置於我的網頁上，徽標位於左側，水平導航欄位於右側。如何製作標題左側的徽標和右側的導航？

問題是，無論何時我縮小瀏覽器窗口，導航欄都會低於頁眉容器的邊界，從而違反頁面的結構。

像這樣：

有什麼辦法呢？我只能想到使父容器Header容納其子容器的高度，但我不知道如何實現它。或者我應該以某種方式使用媒體查詢？

我寫了下面的代碼。

header { 
 
    height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
} 
 
#logo { 
 
    float: left; 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<header> 
 
    <img id="logo" src="images/logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-02-04 Rusletov

我不太明白你想有什麼樣的影響。如果縮小並且導航欄不能換行，則會覆蓋標題，這並不好。究竟如何你想這個時候收縮的窗口進行處理？ –

您可以使用Flex模型或最小高度+溢出處理floatting元素。你也可以一起使用，浮動屬性將在flex支持的情況下超越。，

header { 
 
    min-height: 100px; 
 
    background-color: gray; 
 
    background-image: url('img/background.gif'); 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
    overflow:hidden; /* for float if flex not supported */ 
 
} 
 
#logo { 
 
    float: left; 
 
    /* to deal with flex */ 
 
    flex-shrink:0; 
 
    margin:auto;/* or 0 or auto auto auto 0 or ... */ 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<header> 
 
    <img id="logo" src="http://dummyimage.com/140x45&text=logo.png"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#gallery">Gallery</a> 
 
     </li> 
 
     <li><a href="#blog">Blog</a> 
 
     </li> 
 
     <li><a href="#contacts">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-02-04 13:18:03

嘗試有貴麗顯示器「inline-block的」？我認爲你不得不採取「李一」的塊。然後，您可能必須給ul本身設定一個寬度，以便它縮小頁面或使用媒體查詢。我希望這有助於:)

來源

2017-02-04 13:17:24 BMT

如何製作標題左側的徽標和右側的導航？

回答

相關問題