HTML&CSS常用小技巧

公子航

已于 2022-07-11 15:33:28 修改

阅读量168

点赞数

文章标签： css html css3

于 2022-05-10 13:01:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65315526/article/details/124685867

版权

html&css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS实现列表项li的水平居中布局，并解决了在设置子元素margin-top时导致父元素位置变动的问题。主要方法包括将ul设置为表格展示和对父元素应用border或padding来避免顶部间距影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

li水平居中

<div class="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid red;
}
ul{
    display: table;
    margin: 0 auto;
}
li{
    float: left;
    width: 160px;
    height: 400px;
    border: 1px solid green;
    margin: 0 10px;
}

效果图如下：