Question

我正在创建这个网站，只是为了练习使用CSS3和HTML5，我发现自己陷入困境。

我为标题创建了一个div id，并为它添加了一些CSS，但我不知道如何将我创建的链接放入标题中。

我希望我的导航栏位于标题的右侧 this site已经完成了。

我尝试使用以下代码将文本对齐到页面右侧：<P ALIGN=Right>但它只是将我的链接推送到页面右侧并按列表排序。

此处是我目前所有代码的JsFiddle。

Answer 1

如果您希望链接彼此相邻，则无需将它们包装在段落标记中。这就是造成休息的原因。

不是将每个链接包装在段落中，而是将它们全部包装在div中。

<div style="text-align: right;">
    <!--- links --->
</div>

这应该会产生预期的效果。

Fiddle Demo

Answer 2

在链接周围扔了一个div，使它更加流畅。 View it Here

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

Answer 3

导航通常是这样创建的：DEMO

HTML：

 <body>
   <div id = "header">
     <h1>Website</h1>
     <ul>
        <li><a href="#">Page</a> 
        <li><a href="#">Page</a> 
        <li><a href="#">Page</a>
     </ul> 
   </div>  
 </body>

CSS：

ul {
    text-align: right;
    list-style: none;
    margin-top: -35px;
}

ul li {
    display: inline-block;
    padding-left: 10px;
}

ul li:last-child{
    padding-right: 10px;
}

Answer 4

我做了一个简单的例子。请在此处查看：http://cdpn.io/txBhd

要记住的重要事项：

- Give h1 a display: inline-block; else you need extra lines of code to do the positioning.
- Apply float to ul, not li, it will reverse the order of your list.
- Use ul and li instead of the p-tag, much easier to control.
- For semantics, use HTML5-tags, such as <header> and <nav>

如何添加链接到标题的链接？

4 个答案: