如何以横向顺序在网站上放置链接？

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更改默认设置他首先让他们变得不可预测。