如何以橫向順序在網站上放置鏈接？

Question

我是網頁設計領域的新手，現在我嘗試在HTML中製作一個網站的副本，但這裏有一個問題，我想將鏈接放在網站頂部的橫向序列中。有人請告訴我如何建立鏈接？例如，我怎樣才能使這些鏈接順序？

<a href="http://poempunch.com/" title="Poems |Poets |Best Poems |Short Poems |Poems Collection - Poempunch.com">Home</a> 

Answer 1

很簡單...不要在它們之間放置一個<br>，也不要將它們設計爲塊。

<a href="#">Link 1</a> 
<a href="#">Link 2</a> 
<a href="#">Link 3</a> 

它們甚至可以在HTML中單獨行中。

編輯

你要求把圖像中的鏈接...

<a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a> 
<a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a> 
<a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a> 

你也可以把它放在一個列表，因爲這是「語義更好」，如果它是導航。

<ul class="navigation"> 
    <li><a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a></li> 
    <li><a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a></li> 
    <li><a href="#"><img src="link-to-image.jpg" alt="Alt text" /></a></li> 
</ul> 

然後，你可以風格這個列表，但你喜歡與CSS。

<style type="text/css"> 
    .navigation{list-style-type: none;} 
    .navigation li{float:left} 
</style> 

Answer 2

檢查這個佈局：http://jsfiddle.net/KFbth/1/

<ul id="menu"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

，並與您所指的網站形象：http://jsfiddle.net/KFbth/9/

Answer 3

錨標籤是默認的 「內聯」 的元素。如果您更改了CSS文件的默認值，那麼您可能需要將它們設置爲內聯樣式。您可以通過驗證這一理論無論是評估元素像螢火蟲或添加這樣的風格：

a.inlined { 
    display: inline; 
} 

而且像這樣的鏈接：

< A HREF =「/home.html」的類=」內聯」 >首頁</A >
< A HREF = 「other.html」 級= 「內聯」 >其他</A >

一種更好的方式，是要確保你不t更改默認設置他首先讓他們變得不可預測。