新线路上的链接答案

【问题标题】：Links on New Line新线路上的链接
【发布时间】：2015-07-02 15:21:29
【问题描述】：

我有以下几点：

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 个指向 google 的链接，但它们都在同一行。我希望每个链接都在一个新行上。我尝试使用  并将 CSS 代码中的所有 a 更改为 p，但它没有做任何事情。

【问题讨论】：

使用浮动：左； clear:left 到 CSS 中的锚标记
从外观上看，您可能想改用ul 和lis。

标签： html css hyperlink

【解决方案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>

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

【讨论】：

【解决方案2】：

CSS：在标签中添加 display: table

a{display: table;}

【讨论】：

【解决方案3】：

您可以使用 float:left; 和 clear:left; 使用 CSS 来完成此操作

a {
    float:left;
    clear:left;
}

【讨论】：

【解决方案4】：

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 边距属性。

• 底部边距：0 • 左边距：0 • 右边距：0 • 上边距：0

【讨论】：

【解决方案5】：

使用  标记来换行。

<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 }

【讨论】：

当我这样做时
，css 搞砸了。最后一个链接不是金黄色，而是第二个链接为金黄色，最后一个链接为蓝色。

【解决方案6】：

只需在每个链接后添加  或 标签，它将显示在新行上。 :)

【讨论】：

【解决方案7】：

看到这个Demo

和css

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

【讨论】：

【解决方案8】：

你可以试试这个：

Working Demo

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

【讨论】：

【解决方案9】：

为了让你换行，你应该在你的css中使用display: block;声明。

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

浮动元素一切都很好，但由于来自 DOM 的“浮动元素”可能会变得混乱，这使得定位其他元素变得更加困难。

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

快速演示类似于：

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

<!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>

【讨论】：

【解决方案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 包围了一个标签，以使 a 标签可以通过它们在 css 中的索引来选择。为了在 dom 中访问它们，定义了一个包装器 div 并将其命名为 anchors。我首先选择包装 div (.anchors) 并使用索引访问它的子 div，然后是它们的锚。

这是工作的fiddle。

【讨论】：