在我的導航中添加我的徽標

我目前正在學習web開發，所以我正在練習一些html和css。我在將徽標放在左側時遇到問題。我希望做到的是這樣的：在我的導航中添加我的徽標

我有我的導航欄，我右面左側的標誌是我的導航菜單家，合作伙伴和產品，變成一個漢堡包菜單時，屏幕寬度減小。

你能幫我解決一下嗎，或者指點我一個很好的資源來正確完成我的佈局？謝謝大家。

這裏是我的HTML代碼：

.menu { 
 
    margin: 0 30px 0 0; 
 
    background-color: #f8f5f2; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    color:black; 
 
    margin: 0 10px; 
 
    line-height: 70px; 
 
    font-family: playfair-display 
 
} 
 

 
span { 
 
    color: dodgerblue; 
 
} 
 

 
label { 
 
    margin: 0 40px 0 0; 
 
    font-size: 26px; 
 
    line-height: 70px; 
 
    display: none; 
 
    width: 20px; 
 
    float: right;  
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    label{ 
 
    display: block; 
 
    cursor: pointer; 
 
    } 
 
    .menu { 
 
    text-align: center; 
 
    width: 100%; 
 
    display: none; 
 
    } 
 
    .menu a { 
 
    clear: right; 
 
    display: block; 
 
    border-bottom: 1px solid black; 
 
    margin: 0; 
 
    } 
 
    #toggle: checked + .menu { 
 
    display: block; 
 
    } 
 
}

<header> 
 
    <div class="nav"> 
 
     <div id="logo"> 
 
     <img src="img/logoblackandred.png" alt="logo"> 
 
     </div> 
 
     <label for="toggle">&#9776;</label> 
 
     <input type="checkbox" id="toggle" /> 
 
     <div class="menu"> 
 
      <a href="#">Home</a> 
 
      <a href="#">Partners</a> 
 
      <a href="#"><span>Products</span></a> 
 
     </div> 
 
    </div> 
 
</header>

來源

2017-06-02 noelfabro

https://v4-alpha.getbootstrap.com/components/navbar/ – Gerard

謝謝陽順。真棒隊友！ – noelfabro

嘗試

img{ 
    display:inline; 
    width:70px; 
    height:50px; 
    float:left; 
}

來源

2017-06-02 06:08:16

謝謝你manish。 – noelfabro

喜歡這個？

我刪除了position: fixed並添加display: inline到#logo和#menu

.menu { 
 
    margin: 0 30px 0 0; 
 
    background-color: #f8f5f2; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    display: inline; 
 
} 
 

 
.menu a 
 
{ 
 
    text-decoration: none; 
 
    color:black; 
 
    margin: 0 10px; 
 
    line-height: 70px; 
 
    font-family: playfair-display 
 
} 
 

 
span 
 
{ 
 
    color: dodgerblue; 
 
} 
 

 
label 
 
{ 
 
    margin: 0 40px 0 0; 
 
    font-size: 26px; 
 
    line-height: 70px; 
 
    display: none; 
 
    width: 20px; 
 
    float: right;  
 
} 
 

 
#toggle 
 
{ 
 
    display: none; 
 
} 
 

 
#logo { 
 
    display: inline; 
 
} 
 

 
@media only screen and (max-width: 500px) 
 
{ 
 
    label 
 
    { 
 
     display: block; 
 
     cursor: pointer; 
 
    } 
 
    .menu 
 
    { 
 
     text-align: center; 
 
     width: 100%; 
 
     display: none; 
 
    } 
 
    .menu a 
 
    { 
 
     clear: right; 
 
     display: block; 
 
     border-bottom: 1px solid black; 
 
     margin: 0; 
 
    } 
 
    #toggle: checked + .menu 
 
    { 
 
     display: block; 
 
    } 
 
}

<header> 
 
<div class="nav"> 
 
    <div id="logo"> 
 
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="logo" width="200px"> 
 
    </div> 
 
    <label for="toggle">&#9776;</label> 
 
    <input type="checkbox" id="toggle" /> 
 
    <div class="menu"> 
 
     <a href="#">Home</a> 
 
     <a href="#">Partners</a> 
 
     <a href="#"><span>Products</span></a> 
 
    </div> 
 
</div> 
 
</header>

來源

2017-06-02 06:08:57

謝謝帕特里克！ – noelfabro

我有點改變的HTML代碼，並添加到CSS代碼幾行。

這是Demo

.menu 
 
{ 
 
    margin: 0 30px 0 0; 
 
    background-color: #f8f5f2; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.menu a 
 
{ 
 
    text-decoration: none; 
 
    color:black; 
 
    margin: 0 10px; 
 
    line-height: 70px; 
 
    font-family: playfair-display 
 
} 
 

 
span 
 
{ 
 
    color: dodgerblue; 
 
} 
 

 
label 
 
{ 
 
    margin: 0 40px 0 0; 
 
    font-size: 26px; 
 
    line-height: 70px; 
 
    display: none; 
 
    width: 20px; 
 
    float: right;  
 
} 
 

 
#toggle 
 
{ 
 
    display: none; 
 
} 
 

 
.logo { 
 
\t display: none; 
 
} 
 

 
.lg-logo { 
 

 
\t float: left; 
 
    display: inline-block; 
 
\t width: 50px; 
 
\t margin-top: 15px; 
 
    
 
} 
 

 

 
@media only screen and (max-width: 500px) 
 
{ 
 
    label 
 
    { 
 
     display: inline-block; 
 
     cursor: pointer; 
 
     vertical-align: middle; 
 
    } 
 
    .menu 
 
    { 
 
     text-align: center; 
 
     width: 100%; 
 
     display: none; 
 
    } 
 
    .menu a 
 
    { 
 
     clear: right; 
 
     display: block; 
 
     border-bottom: 1px solid black; 
 
     margin: 0; 
 
    } 
 
    #toggle: checked + .menu 
 
    { 
 
     display: block; 
 
    } 
 

 
    .logo { 
 

 
    float: left; 
 
    display: inline-block; 
 
\t width: 50px; 
 
\t margin-top: 15px; 
 

 
} 
 
}

<header> 
 
<div class="nav"> 
 
    <div id="logo"> 
 
    <img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo"> 
 
    </div> 
 
    <label for="toggle">&#9776;</label> 
 
    <input type="checkbox" id="toggle" /> 
 
    <div class="menu"> 
 
     <a href="#">Home</a> 
 
     <a href="#">Partners</a> 
 
     <a href="#"><span>Products</span></a> 
 
     <img class="lg-logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo"> 
 
    </div> 
 
</div> 
 
</header>

注：調整瀏覽器，看到的結果。

來源

2017-06-02 06:31:12 Ehsan

謝謝ehsan的評論！ :-) – noelfabro

嘗試檢查下面的代碼jsfiddle鏈接。

You can change the width for logo id and menu class https://jsfiddle.net/pradeepv/yxnLs89h/

來源

2017-06-02 06:41:41 pradeep

你應該在這裏添加你的代碼，而不是鏈接到某個外部網站。 – Markus

請將此代碼與您的舊代碼重新分隔。

.menu 
 
{ 
 
    margin: 0 30px 0 0; 
 
    background-color: #f8f5f2; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.menu a 
 
{ 
 
    text-decoration: none; 
 
    color:black; 
 
    margin: 0 10px; 
 
    line-height: 70px; 
 
    font-family: playfair-display 
 
} 
 

 
span 
 
{ 
 
    color: dodgerblue; 
 
} 
 

 
label 
 
{ 
 
    margin: 0 40px 0 0; 
 
    font-size: 26px; 
 
    line-height: 70px; 
 
    display: none; 
 
    width: 20px; 
 
    float: right;  
 
} 
 

 
#toggle 
 
{ 
 
    display: none; 
 
} 
 

 
.logo { 
 
\t display: none; 
 
} 
 

 
.lg-logo { 
 

 
\t float: left; 
 
    display: inline-block; 
 
\t width: 50px; 
 
\t margin-top: 15px; 
 
    
 
} 
 

 

 
@media only screen and (max-width: 500px) 
 
{ 
 
    label 
 
    { 
 
     display: inline-block; 
 
     cursor: pointer; 
 
     vertical-align: middle; 
 
    } 
 
    .menu 
 
    { 
 
     text-align: center; 
 
     width: 100%; 
 
     display: none; 
 
    } 
 
    .menu a 
 
    { 
 
     clear: right; 
 
     display: block; 
 
     border-bottom: 1px solid black; 
 
     margin: 0; 
 
    } 
 
    #toggle: checked + .menu 
 
    { 
 
     display: block; 
 
    } 
 

 
    .logo { 
 

 
    float: left; 
 
    display: inline-block; 
 
\t width: 50px; 
 
\t margin-top: 15px; 
 
    } 
 
}

<div class="nav"> 
 
    <div id="logo"> 
 
    <img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo"> 
 
    </div> 
 
    <label for="toggle">&#9776;</label> 
 
    <input type="checkbox" id="toggle" /> 
 
    <div class="menu"> 
 
     <a href="#">Home</a> 
 
     <a href="#">Partners</a> 
 
     <a href="#"><span>Products</span></a> 
 
     <img class="lg-logo" src="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg" alt="logo"> 
 
    </div> 
 
</div>

來源

2017-06-02 12:11:04

在我的導航中添加我的徽標

回答

相關問題