Question

我有以下内容：

HTML

  <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Result</title>
        </head>
        <body>
        <div>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            </div>
        </body>
    </html>

CSS

    a:hover{
        text-decoration: none
    }
    a:first-child{
        color: #CDBE70
    }
    a:nth-child(3){
        color: #FFC125
}

我刚刚开始学习HTML，但我遇到了问题。我上面的内容显示3个谷歌链接，但它们都在同一条线上。我希望每个链接都在新的一行。我尝试使用并将所有内容更改为CSS代码中的p，但它没有做任何事情。

Answer 1

如果链接在语义上是一个列表，你也应该在标记中重现它：

<ul>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
</ul>

如果您不想在链接前面放置项目符号，可以在list-style-type: none;或ul上使用CSS li删除它们。

Answer 2

您可以使用float:left;和clear:left;

来使用CSS

a {
    float:left;
    clear:left;
}

Answer 3

CSS：在标记中添加display：table

a{display: table;}

Answer 4

使用 标记来排除该行。

<a href="https://google.com">Google</a><br/>

但是使用此解决方案，您将不得不修改css，因为下一个<a>不再是孩子。相反，您可以使用nth-of-type和first-of-type：

a:hover { text-decoration: none }
a:nth-of-type(3) { color: #FFC125 }
a:first-of-type { color: #CDBE70 }

这将确保只有<a>个标签才是选择器的一部分。

或者您可以将每个链接放在自己的<div>：

中

<div class="menu"><a href="https://google.com">Google</a></div>
<div class="menu"><a href="https://google.com">Google</a></div>
<div class="menu"><a href="https://google.com">Google</a></div>
a:hover { text-decoration: none }
div.menu:nth-child(3) a { color: #FFC125 }
div.menu:first-child a { color: #CDBE70 }

Answer 5

Try using break to give a line break between the three links like this;   

<div>
        <a href= https://google.com>Google</a><br/>
        <a href= https://google.com>Google</a><br/>
        <a href= https://google.com>Google</a><br/>
</div>

 会在文字中产生换行符。
换行标记可以放在其他HTMl元素中段落，清单，表格和标题
对次要格式问题使用换行符标记。对于更大的问题使用表格和对齐属性。
换行标记不需要结束标记。
为了增加文本行之间的差距，请使用CSS margin属性。

•margin-bottom：0 •margin-left：0 •margin-right：0 •margin-top：0

Answer 6

你可以试试这个：

Working Demo

a{ 
    display:block; 
    margin-bottom:10px;
}
a:hover{
    text-decoration: none
}
a:first-child{
    color: #CDBE70
}
a:nth-child(3){
    color: #FFC125
}

Answer 7

只需在每个链接后添加 或标记，它就会显示在新行中。：）

Answer 8

请参阅此Demo

和css

<style>     
  div a{
   display:list-item;
   }
</style>

Answer 9

为了让您突破新行，您应该在css中使用length声明。

Here's a few reasons as to why to use display instead of float

浮动元素一切都很好，但由于“浮动元素”而变得混乱。从DOM中走出来，这使得定位其他元素变得更加困难。

display: block;元素默认为a，这意味着多个标签会出现在一行中。通过将它们更改为display:inline意味着一次只能连续一个（即您要查找的内容）。

快速演示就像：

＆＃13;

display:block;

＆＃13;

a:hover {
  text-decoration: none
}
a:first-child {
  color: #CDBE70
}
a:nth-child(3) {
  color: #FFC125
}
a {
  display: block;
}

＆＃13;

Answer 10

您可以执行Twitter的Bootstrap在整个地方所做的事情，并使用具有适当类的div来包围您的元素。我会做的是：

CSS

.anchors a:hover{
        text-decoration: none
    }
    .anchors div:first-child a{
        color: #CDBE70
    }
    .anchors div:nth-child(3) a{
        color: #FFC125
}

HTML

<div class="anchors">
    <div>
        <a href= https://google.com>Google</a>
    </div>
    <div>
        <a href= https://google.com>Google</a>
    </div>
    <div>
        <a href= https://google.com>Google</a>
    </div>
</div>

我用div包围了一个标签，以便通过css中的索引选择一个标签。为了在dom中访问它们，定义了一个包装器div并命名其类 anchors 。我首先选择包装div（.anchors）并使用索引访问它的子div，然后使用它们的锚点。

这是工作fiddle。

新线上的链接

10 个答案: