div里面写ul之后不能正常对齐的解决方法

最新推荐文章于 2022-09-06 18:32:40 发布

想吃热红薯

最新推荐文章于 2022-09-06 18:32:40 发布

阅读量731

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_51418516/article/details/115577210

版权

div里面写ul之后不能正常对齐的解决方法

源代码：
html部分

<body>
    <div class="head">

    </div>

    <div class="bodyL">
        <ul>
            <li>输出</li>
            <li>语法</li>
            <li>语句</li>
            <li>函数</li>
            <li>作用域</li>
        </ul>
    </div>

    <div class="bodyMain">

    </div>

</body>

css部分：

  * {
            margin: 0;
            padding: 0;
        }

        .head {
            background-color: #f38181;
            height: 30px;
            width: 280px;
        }

        .bodyL {
            display: inline-block;
            background-color: red;
            width: 80px;
            height: 200px;
        }

        ul {
            display: inline-block;
        }

        .bodyMain {
            display: inline-block;
            background-color: #eaffd0;
            width: 200px;
            height: 200px;
        }

未加ul的显示效果：

加了ul之后：
竟然变成这样了...
修改方法：
加上注释的地方就好了

   .bodyL {
            display: inline-block;
            background-color: red;
            width: 80px;
            height: 200px;
       
            **/* overflow:auto; 
            zoom:1; */**
            
        }

引用了这篇回答的方法，也是csdn里的
https://blog.csdn.net/weixin_30485379/article/details/97146744?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control&dist_request_id=1330147.7584.16180380858044367&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-4.control

想吃热红薯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div里面写ul之后不能正常对齐的解决方法

div里面写ul之后不能正常对齐的解决方法源代码：html部分<body> <div class="head"> </div> <div class="bodyL"> <ul> <li>输出</li> <li>语法</li> <li>语句</li>
复制链接

扫一扫