css两个li水平对齐

发表于前端技术学习版块 css,教程

在CSS中，水平对齐是一个很常见的问题。当我们需要将两个或多个元素的水平位置对齐时，我们可以使用CSS中的一个很重要的属性——display: inline-block。例如，如果我们有两个元素，每

在CSS中，水平对齐是一个很常见的问题。当我们需要将两个或多个元素的水平位置对齐时，我们可以使用CSS中的一个很重要的属性——display: inline-block。
例如，如果我们有两个

元素，每个元素都包含一些文本或图标，但它们的宽度不同，我们想将它们对齐，这时候我们就可以使用display: inline-block：

<ul>
  <li>选项1</li>
  <li>选项2</li>
</ul>
<br>
<style>
  li {
    display: inline-block;
    vertical-align: top; /* 防止下对齐 */
  }
</style>

在这个例子中，我们将每个

元素的display属性设置为inline-block，这样就可以让它们出现在一行。接下来，我们再将它们的垂直对齐方式设置为顶部，这样就可以让它们在同一水平线上对齐了。
需要注意的是，使用display: inline-block时，元素之间存在一些间距，这是因为HTML中的空格或换行符。为了消除这些间隔，我们可以将这些空格删除或使用一个

<ol>
  <li>选项1</li><!-- 在下一行中移除空格 -->
  <li>选项2</li>
</ol>
<br>
<style>
  ol {
    list-style: none; /* 删除默认样式 */
    padding: 0; /* 删除边距 */
    margin: 0;
  }
<br>
  li {
    display: inline-block;
    vertical-align: top;
  }
</style>