CSS实现ul和li横向排列的两种方法

下面是CSS实现ul和li横向排列的两种方法的攻略：

方法一：使用display:inline-block

使用display:inline-block是CSS实现ul和li横向排列最常见的方法之一。

具体步骤如下：

1. 在ul选择器中添加display: inline-block，将ul设置为行内块元素。
2. 在li选择器中添加display:inline-block，将li设置为行内块元素，并设置宽度和高度。
3. 通过padding和margin设置li的外间距和内边距。

下面是一个示例：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.menu {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  background-color: #ddd;
}

.menu li a {
  display: block;
  color: #333;
  text-decoration: none;
}

方法二：使用float

使用float也是CSS实现ul和li横向排列的常用方法之一。

具体步骤如下：

1. 在ul选择器中添加overflow:hidden，用来清除浮动。
2. 在li选择器中添加float:left，将li设置为浮动元素。
3. 通过padding和margin设置li的外间距和内边距。

下面是一个示例：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.menu li {
  float: left;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  background-color: #ddd;
}

.menu li a {
  display: block;
  color: #333;
  text-decoration: none;
}