three_lives 2021-12-06 16:41 采纳率: 66.7%
浏览 81
已结题

为什么li里的ul不会撑开父容器

/


<!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>qq飞车</title>
    <style>
        *{padding: 0;margin: 0;}
        img{display: block;}
        header{height: 40px;width: 100%;}
        a{text-decoration: none;color: white;}
        ul,li{list-style: none;}
        .r{float: right;}
        .l{float: left;}
        .conta{width: 1080px;margin: 0 auto;}
        hgroup>a{float: left;display: block;width: 220px;height: 41px;}
        hgroup>a:first-child{background: url(./images/ost-bg.png) no-repeat 0 -38px;margin-right: 8px;}   
            hgroup>span{float: right;margin-left: 20px;line-height: 40px;
                background: url(./images/ost-bg.png) no-repeat;}  
            hgroup>span:first-child{    background-position: right -75px;padding-right: 18px;}
            hgroup>span:last-child{background-position:left -80px;padding-left: 20px;}
            main{background: url(./images/bg20190104.jpg) no-repeat;width: 100%;}
            main .main-list{height: 60px;background: rgb(44, 41, 41);opacity: .5;border: 1px skyblue solid;}
            main .main-list>ul{height: 236px;}
            main .main-list>ul>li{float: left;margin-left:40px;height: 60px;}
            main .main-list>ul>p {font-size:16px;font-weight: bold;margin-top:10px;}
            main .main-list>ul>li>span{font-size:10px;}
            .clear::after{content: "";display: block;clear:both;}
            .aa{background-color: red;}
    </style>
</head>
<body>
    <header >
        <div class="conta"> 
<hgroup class="l">
   <a href="#"></a>
   <a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
        </div>  
    </header>
    <main class="clear">
<div class="main-list conta ">
    <ul class=" ">
        <li><a href="#"><p>首页</p><span>HOME</span></a></li>
        <li><a href="#"><p>游戏资料</p><span>GAME</span></a>
            <ul>
                <li>新手指导</li>
                <li>官方漫画<span>H</span></li>
                <li>飞车手游<i>N</i></li>
                <li>精美壁纸</li>
                <li>游戏下载</li>
            </ul>
        </li>
        <li><a href="#"><p>赛事中心</p><span>RACE</span></a>
            <ul>
                <li>SSC<span>H</span></li>
                <li>谁是车王</li>
                <li>全民争霸</li>
            </ul>
        </li>
        <li><a href="#"><p>活动中心</p><span>EVENT</span></a>
            <ul>
                <li>版本专区<span>H</span></li>
                <li>合作专区</li>
                <li>CDK兑换</li>
            </ul>
        </li>
    </ul><div class="aa">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>
    </main>
</body>
</html>  
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2021-12-06 16:57
    关注
    <!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>qq飞车</title>
            <style>
                * {
                    padding: 0;
                    margin: 0;
                }
                
                img {
                    display: block;
                }
                
                header {
                    height: 40px;
                    width: 100%;
                }
                
                a {
                    text-decoration: none;
                    color: white;
                }
                
                ul,
                li {
                    list-style: none;
                }
                
                .r {
                    float: right;
                }
                
                .l {
                    float: left;
                }
                
                .conta {
                    width: 1080px;
                    margin: 0 auto;
                }
                
                hgroup>a {
                    float: left;
                    display: block;
                    width: 220px;
                    height: 41px;
                }
                
                hgroup>a:first-child {
                    background: url(./images/ost-bg.png) no-repeat 0 -38px;
                    margin-right: 8px;
                }
                
                hgroup>span {
                    float: right;
                    margin-left: 20px;
                    line-height: 40px;
                    background: url(./images/ost-bg.png) no-repeat;
                }
                
                hgroup>span:first-child {
                    background-position: right -75px;
                    padding-right: 18px;
                }
                
                hgroup>span:last-child {
                    background-position: left -80px;
                    padding-left: 20px;
                }
                
                main {
                    background: #F4C6A6;
                    width: 100%;
                }
                
                main .main-list {
                    height: 60px;
                    background: rgb(44, 41, 41);
                    opacity: .5;
                    border: 1px skyblue solid;
                }
                
                main .main-list>ul {
                    height: 236px;
                }
                
                main .main-list>ul>li {
                    float: left;
                    margin-left: 40px;
                    /*height: 60px;*/
                }
                main .main-list>ul>li a{
                    display: block;
                    height:60px;
                }
                
                main .main-list>ul>p {
                    font-size: 16px;
                    font-weight: bold;
                    margin-top: 10px;
                }
                
                main .main-list>ul>li>span {
                    font-size: 10px;
                }
                
                .clear::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                
                .aa {
                    background-color: red;
                }
            </style>
        </head>
    
        <body>
            <header>
                <div class="conta">
                    <hgroup class="l">
                        <a href="#"></a>
                        <a href="#"><img src="./images/ad.jpg" alt=""></a>
                    </hgroup>
                    <hgroup class="r">
                        <span>成长守护平台</span>
                        <span>腾讯游戏排行榜</span>
                    </hgroup>
                </div>
            </header>
            <main class="clear">
                <div class="main-list conta ">
                    <ul class=" ">
                        <li>
                            <a href="#">
                                <p>首页</p><span>HOME</span></a>
                        </li>
                        <li>
                            <a href="#">
                                <p>游戏资料</p><span>GAME</span></a>
                            <ul>
                                <li>新手指导</li>
                                <li>官方漫画<span>H</span></li>
                                <li>飞车手游<i>N</i></li>
                                <li>精美壁纸</li>
                                <li>游戏下载</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <p>赛事中心</p><span>RACE</span></a>
                            <ul>
                                <li>SSC<span>H</span></li>
                                <li>谁是车王</li>
                                <li>全民争霸</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <p>活动中心</p><span>EVENT</span></a>
                            <ul>
                                <li>版本专区<span>H</span></li>
                                <li>合作专区</li>
                                <li>CDK兑换</li>
                            </ul>
                        </li>
                    </ul>
                    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
                    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
                    <div class="aa">aaaaaaaaaaaaaaaaaaa</div>
                </div>
            </main>
        </body>
    
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月14日
  • 已采纳回答 12月6日
  • 创建了问题 12月6日