如何改變DIV頭中的這些鏈接

我試圖想出一個簡單的CSS佈局，應該是這樣的位置：如何改變DIV頭中的這些鏈接

enter image description here

這是我的頁眉和導航欄HTML代碼：

<div id="header"> 
<h1>LOGO</h1> 
<ul> 
<li><a href= ""> Home </a></li> 
<li><a href= ""> Logout </a></li> 
</ul> 
</div> 

<div id="navigation"> 
<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a> 
    <li><a href="">Contact Us</a> 
    <li><a href="">Customers</a> 

</div>

而且我已經在做導航欄上的一些風格，但是我希望能夠保持對準頭部右側和標識圖像中的兩個環節左對齊。當我嘗試編輯標題中的這些鏈接時，所有這些都變得混亂起來，因爲我對如何區分導航列表項目和標題列表項目感到困惑。有人可以幫我定位標題嗎？

來源

2013-02-14 elmify

在標題中，您需要將h1左側和ul右側浮動，然後將display: inline添加到您的鏈接（使它們保持在同一行上）。

要定位標題中的列表項，可以簡單地使用父選擇器，如下所示：#header li。

這裏有您需要什麼：

#header { 
    border: 1px solid #ccc; 
    overflow: hidden; /* clearfix */ 
} 
#header h1 { 
    float: left; 
} 
#header ul { 
    float: right; 
} 
#header li { 
    display: inline; 
}

見DEMO。

來源

2013-02-14 20:52:13 zakangelle

謝謝你，鏈接似乎是在對話框的底部，雖然，我如何將它們移動到頂部？謝謝 – elmify 2013-02-14 21:09:21

我看到他們出現在頂部。我爲'header'元素添加了一個'height'來表明：http://jsfiddle.net/zaknotzak/hYyAZ/1/ – zakangelle 2013-02-14 21:15:37

謝謝你現在很好 – elmify 2013-02-14 21:23:29

#header ul { float: left; }

或

#header ul { position: absolute; right: 0; }

來源

2013-02-14 20:57:25 AGDM

如何改變DIV頭中的這些鏈接

回答

相關問題