裂开的咸鱼 2022-02-07 15:50 采纳率: 88.9%
浏览 80
已结题

html中下拉栏向左对齐(蓝色下拉框如何和黑色导航栏对齐?)

img

img

img

img

img


我想要蓝色的下拉栏和上面的黑框对齐

<!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>裂开的鱼</title>
    <style>
        * {
            margin-top: 0px;
        }
        
        .dropdown {
            list-style: none;
        }
        /* 消除标记 */
        
        .top {
            background: url(logo/1.png);
            background-repeat: no-repeat;
            /* 背景图片只显示一次 */
            background-size: 225px 50px;
            width: 1440px;
            height: 50px;
            margin: 0 auto;
            background-color: black;
        }
        
        .logo {
            width: 1440px;
            height: 50px;
            margin: 0 auto;
        }
        
        .logo1 {
            float: left;
            margin-left: 400px;
        }
        
        .logo2 {
            float: left;
            margin-left: 30px;
        }
        
        .logo3 {
            float: left;
            margin-left: 30px;
        }
        
        .logo4 {
            float: left;
            margin-left: 30px;
        }
        
        .logo5 {
            float: left;
            margin-left: 30px;
        }
        
        .dropdown {
            display: inline-block;
        }
        /* 使元素独占一个盒子 */
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgb(38, 146, 196);
            width: 1440px;
            height: 300px;
            /* 设置链接元素的最小宽度 */
            box-shadow: 0px 5px 0px 0px rgb(121, 121, 120);
            /* 设置下拉框阴影 上下左右顺序*/
            overflow: auto;
            /* 如果内容被修剪,则浏览器会显示滚动条,以便查看其余内容。flex中的属性 */
            margin-top: 50px;
            margin-left: 0;
        }
        /* 隐藏菜单 */
        
        .skill-box {
            float: left;
            width: 360px;
            height: 250px;
            background-color: rgba(0, 0, 0, 0)
        }
        
        .logo1 :hover {
            color: #fff;
            background: rgba(0, 114, 170, 1);
        }
        
        .logo2 :hover {
            color: #fff;
            background: rgba(234, 85, 41, 1);
        }
        
        .logo3 :hover {
            color: #fff;
            background: rgba(253, 209, 0, 1);
        }
        
        .logo4 :hover {
            color: #fff;
            background: rgba(167, 166, 166, 1);
        }
        
        .logo5 :hover {
            color: #fff;
            background: rgba(217, 217, 217, 1);
        }
        /* 下拉技能盒子 */
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="top">
        <ul class="logo">
            <div class="dropdown">
                <a href="#" class="logo1"><img src="logo/蓝鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <div class="dropdown-box">
                        <div class="skill-box">1</div>
                        <div class="skill-box">2</div>
                        <div class="skill-box">3</div>
                        <div class="skill-box">4</div>
                    </div>


                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo2"><img src="logo/红鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo3"><img src="logo/黄鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo4"><img src="logo/黑鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo5"><img src="logo/白鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>

        </ul>


    </div>

</body>

</html>

  • 写回答

1条回答 默认 最新

  • 原莱_ 2022-02-07 16:09
    关注

    left跟上面黑块的左侧距离保持一致

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 2月16日
  • 已采纳回答 2月8日
  • 创建了问题 2月7日

悬赏问题

  • ¥15 开发一个小区生态的小程序
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)
  • ¥15 c# 直接使用c++ 类库文件