前端中的下拉框问题

最新推荐文章于 2024-07-29 12:13:58 发布

one or two

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量680

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_41633396/article/details/117089638

版权

本文探讨了如何在HTML中使用a标签包裹块级元素实现可点击的下拉框效果，如小米商城案例所示。通过将块级元素放入a标签内，并保持a标签为行内元素，依然可以实现链接跳转。示例代码展示了一个包含段落的a标签，点击段落可触发链接跳转。

摘要由CSDN通过智能技术生成

小米商城下拉框

在这里插入图片描述

像这种情况，hover一般是给容器这个父元素

这种下拉框，还可以跳转的，小米商城里面是采用，将它写在a标签里面的（但是那个a标签利用display被转化为了block）

在这里插入图片描述

下面来检验，即使行内标签a（没有被display转化为块元素），它里面也可以包含一个块元素，并且点击a标签里面的块元素，它也会跳转

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <a href="https://www.mi.com/?masid=2701.0074">
            <p>在繁华中自律，在落魄中自愈</p>
        </a>
    </body>
</html>