本文将总结如何让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>

实现效果

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

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>

实现效果

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

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>

实现效果

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

参考