您现在的位置是:首页 > 学习记录 > html+css+js前端学习

ul标签没有高度,怎么让ul与li标签撑开外面的div标签

2021-06-14【html+css+js前端学习】 273人已围观

简介在用ul li标签做页面的布局的时候,一般ul是包含在一个div里面,如果给div加个border属性,然后再去看li标签的内容,会发现高度没有自动撑开,这个时候怎么办呢?ul标签没有高度,怎么让ul与li标签撑开外面的div标签,其实是有2种方法可以解决这个问题的。方法1:在ul标签同级下新增一个伪元素,如下写法 ul:after{ content: ""; display: block; ...

在用ul li标签做页面的布局的时候,一般ul是包含在一个div里面,如果给div加个border属性,然后再去看li标签的内容,会发现高度没有自动撑开,这个时候怎么办呢?

ul标签没有高度,怎么让ul与li标签撑开外面的div标签,其实是有2种方法可以解决这个问题的。

方法1:在ul标签同级下新增一个伪元素,如下写法

 ul:after{

    content"";

    displayblock;

    clearboth;

}


方法2:在ul标签的最后一个li标签后面给个清除浮动的div标签,例如

<ul>

    <li><a href="">这是一个示例</a></li>

    <li><a href="">这是一个示例</a></li>

    <li><a href="">这是一个示例</a></li>

    <li><a href="">这是一个示例</a></li>

    <li><a href="">这是一个示例</a></li>

    <div class="clear" style="clear: both;"></div>

</ul>

在具体使用的时候,可以根据自己的情况选择合适的写法

以上就是 ul标签没有高度,怎么让ul撑开外面的DIV标签 的相关解决办法

很赞哦! (0)

文章评论

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

博主推荐

站点信息

  • 建站时间:2019-07-10
  • 网站程序YzmCMS
  • 邮箱:982481365@qq.com
  • QQ号:982481365
  • 微信号:zdrgzs
  • 微信二维码:扫描二维码,关注我们