如何爲嵌入式導航欄elemens

我造型導航欄我簡單的方與下面的代碼：如何爲嵌入式導航欄elemens

HTML：

<div> 
    <ul class="navbar-brand"> 
    <a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'> </a><br /><br /> 
    </ul> 
    <ul class="navbar-right"> 
    <li>home</li> 
    <li>about</li> 
    <li>delivery</li> 
    <li>services</li> 
    </ul> 
</div>

CSS：

ul{ 
    list-style:none; 
    display:inline; 
} 
li{ 
    list-style: none; 
    display: inline; 
    width:100%; 
    padding: 10px; 
} 
ul.navbar-brand{ 
    float:left; 
} 
ul.navbar-right{ 
    float:right; 
}

正如我的片斷顯示（https://jsfiddle.net/Wosley_Alarico/t3uhg5n1/1/）。我想要的標誌浮在左邊，菜單在右邊。但問題在於菜單排在最前面，並且實際上喜歡將它定位到底部。我怎樣才能讓菜單進入底部，並保持它漂浮在右邊？

來源

2016-08-12 Wosley Alarico

我可以看到幾個問題：

對於第一個標籤，沒有它的收盤
你可以，如果你不使用
UL刪除二號不能與李一起使用因此，將其更改爲div或跨度
刪除浮動：右側導航欄的右側類將位於徽標的底部。
添加UL類magin，填充剛纔編輯我的問題更好地理解0

ul{ 
 
    list-style:none; 
 
    display:inline; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
li{ 
 
    list-style: none; 
 
    display: inline; 
 
    width:100%; 
 
    padding:10px 10px 10px 0; 
 
} 
 
ul.navbar-brand{ 
 
    float:left; 
 
} 
 
ul.navbar-right{ 
 
}

<div> 
 
    <div class="navbar-brand"> 
 
    <a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/></a> 
 
    </div> 
 
    <ul class="navbar-right"> 
 
    <li>home</li> 
 
    <li>about</li> 
 
    <li>delivery</li> 
 
    <li>services</li> 
 
    </ul> 
 
    
 
</div>

來源

2016-08-12 20:41:20

@I。並不意味着菜單應放置在圖像之後。我只想將菜單向下移動，但保持向右移動。希望我做了一些道理 –

你有任何圖片或截圖更清晰的期望？ –

如果你檢查了這個主題http://www.templatemonster.com/demo/59038.html，它不完全相同，因爲那裏的菜單沒有漂浮在右邊。菜單和LOGO顯示在同一行，菜單位於底部。相比之下，我的位置更靠前。 –

ul.navbar-right{ 
    float:right; 
    position:relative; 
    bottom:0; 
}

來源

2016-08-12 21:10:03

您是否想要使用此信息編輯現有答案？ –

補充說。把它不真的工作 –

你可以更新現有的代碼。將做出改變 –

如何爲嵌入式導航欄elemens

回答

相關問題