html - 新行链接

标签 html css hyperlink

我有以下内容:

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

最佳答案

如果链接在语义上位于列表中,您也应该在标记中复制它:

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

如果你不想在链接前面有元素符号,你可以使用 CSS list-style-type: none;ul 中删除它们或 li

关于html - 新行链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29840408/

相关文章:

html - CSS 在 CodePen 中不工作

php - 在 html 和 php 中复制静态内容的当前标准

html - 显示 :none when rotating smartphone

css - 我们如何使popover出现在twitter bootstrap css中导航栏的列表项中?

Wordpress 链接将我带到 wamp 服务器配置页面(本地主机)

html - 我可以在不选择任何超链接样式的情况下将超链接附加到动画 div 吗?

html - 如何在没有 flex-wrap 的 ionic 框架中制作每行包含两个图像的图像网格 :wrap;

html - 没有单位的 CSS 属性的回退

html - 输入字段不允许我输入内容

javascript - 我的 react 路由器链接标签不会更改我的页面