Question

我是网页设计领域的新手，现在我正在尝试用HTML格式化网站，但这里有一个问题，我想把链接放在网站顶部的水平序列中。有些人请告诉我如何按顺序建立链接？例如，我如何按顺序制作这些链接？

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

Answer 1

检查此布局：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 2

非常简单......不要在它们之间添加<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 3

Anchor标签默认为“内联”元素。如果您更改了CSS文件中的默认值，则可能需要将它们设置为内联样式。您可以通过评估Firebug之类的元素或添加如下样式来测试此理论：

a.inlined {
    display: inline;
}

这样的链接：

＆lt; a href =“home.html”class =“inlined”＆gt; Home＆lt; / a＆gt;
＆lt; a href =“other.html”class =“inlined”＆gt;其他＆lt; / a＆gt;

更好的方法是确保首先不更改默认值，以免它们变得不可预测。

如何在网站上以水平顺序放置链接？

3 个答案: