感谢大家访问本站，希望本站的内容可以帮助到大家！
欢迎大家交换友链，可在https://www.stubbornhuang.com/申请友情链接进行友链交换申请！
计算机图形学与计算几何经典必备书单整理，下载链接可参考：https://www.stubbornhuang.com/1256/
如果觉得本站的内容有帮助，可以考虑打赏博主哦！
工资「喂饱肚子」，副业「养活灵魂」！
问题反馈可发送邮件到stubbornhuang@qq.com
在本站开通年度VIP，无限制下载本站资源和阅读本站文章
本站由于前段时间遭受到大量临时和国外邮箱注册，所以对可注册的邮箱类型进行了限制！
本站会放置Google广告用于维持域名以及网站服务器费用。

CSS – 总结ul中li元素横向排列的几种方式

StubbornHuang CSS 发布于2023-11-03 阅读 1,324次 0次评论 0次点赞本文共956个字，阅读需要3分钟。

本文将总结如何让ul中的li横向排列的几种方式。

1 使用display:inline属性横向排列li

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      ul{
        list-style: none;
      }

      ul li {
        display: inline;
        background-color: #ff0000;
        margin: 0 10px 0 0;
      }

    </style>
</head>
<body>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>

实现效果

2 使用float:left属性横向排列li

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      ul{
        list-style: none;
      }

      ul li {
        float: left;
        background-color: #ff0000;
        margin: 0 10px 0 0;
      }

    </style>
</head>
<body>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>

实现效果

3 使用flex布局实现横向排列li

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      ul{
        list-style: none;
        display: flex;
      }

      ul li {
        flex:1;
        background-color: #ff0000;
        margin: 0 10px 0 0;
      }

    </style>
</head>
<body>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>

实现效果