如何對齊測試元素旁邊的流程元素？

我對前端開發相對比較陌生，所以在尋找組織水平菜單的最佳方式時會遇到一些問題，其中包含一個徽標和幾個菜單選項。另外，我想用寬|來分隔水平菜單如何對齊測試元素旁邊的流程元素？

不知道該怎麼做。

這是我到目前爲止有：

HTML：

<header> 
<img src="/images/logo.png" height="50px" id="front" /> 
<nav> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</nav>

CSS：

body { 
margin: 0; 
background-color: #FFFFFF; 
} 
header { 
background-color: #009000; 
height: 85px; 
position: relative; 
} 
#front { 
margin-left: 20px; 
margin-top: 20px; 
} 
ul li { 
display: inline; 
list-style-type: none; 
margin-right: 34px; 
}

來源

2012-11-28 KPO

http://jsfiddle.net/u327N/ – Vinit

這對我有效。每個列表元素（用選擇器「ul li」獲得）都有一個很薄的右邊框，而不是使用管道字符。您還可以在每個列表項目之間添加<li> | </li>。

此外，我正在浮動li元素左側，而不是顯示他們內聯。不知道你是否想要在標題內的導航。

HTML：

<header> 
    <img src="/images/logo.png" height="70px" id="front" /> 
    <nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li class="last"><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</header>

CSS：

body { 
    margin: 0; 
} 
header { 
    background-color: #009000; 
    height: auto; 
    position: relative; 
} 
#front { 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
} 
nav { 
    float: left; 
    margin-top: 30px; 
} 
ul { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
ul li { 
    list-style-type: none; 
    float: left; 
    border-right: 2px solid black; 
    padding-right: 5px; 
    padding-left: 5px; 
} 
ul li.last { 
    border-right: 0px; 
}

來源

2012-11-28 23:09:11 Sam

嗨，山姆。是的，我需要徽標旁邊標題中的導航欄。也許距離徽標50px .. – KPO

Nav現在位於標題中。要將其從徽標移開，只需在樣式表的nav {}部分添加「margin-left：50px」（或任何您想要的度量）即可。 – Sam

謝謝薩姆。這工作。另外我注意到，在標題中，你刪除了我的高度，並使用自動。你的方式比我的好嗎？只是想知道，因爲我不知道哪個更好。再次感謝。 – KPO

使用display: inline-block;和float: left;。

另外，將float:left;放置在您的#front css部分中以獲取標題內的導航。

來源

2012-11-28 22:54:38 lifetimes

謝謝，幫助我調整菜單，但我如何將菜單放在標題中？ – KPO

Place float：留在#front css位中。 – lifetimes

好吧，我嘗試過，但是當我實現這個變化時，頂部的標題有一個空白..... – KPO

雖然我創造了這個與資料覈實，而不是UL /李，這裏是會得到你開始的CSS：

body { margin:0; background-color:#FFFFFF; } 
header { background-color:#009000; height:85px; position:relative; } 
header:after { content:''; display:block; clear:both; } 
header img { float:left; margin:20px 20px 0 20px; } 
header ul { list-style-type:none; } 
header ul li { float:left; margin-right:34px; border-left:1px solid #000000; padding-left:10px; } 
header ul li:first { border:none; padding:0; }

你會看到我做了不同的幾件事：

1）我在標題中使用了清除修復系統，這樣當你使用浮動功能時，它們將被清除，並且不必擔心它們在標題之後。

2）我將圖像左移，並在右側添加了一些邊距。

3）由於您使用的UL /李，你需要關閉子彈與list-style-type:none;

4）我飄來li元素，並給他們左側的每個邊界，但後來我刪除了邊界和填充在第一里。

你也可以通過使用display:inline-block;來實現這一點我覺得使用DIV將會是更乾淨的代碼，但我不想改變你的html，而只是向你展示瞭如何用css實現這一點。

來源

2012-11-28 23:28:17 zeMinimalist

如何對齊測試元素旁邊的流程元素？

回答

相關問題