代码之家 › 专栏 › 技术社区 › tom clack

如何在一个列上对齐所有li?

css html

tom clack · 技术社区 · 7 年前

.test {
  text-align: center;
  list-style-position: inside;
}

<div class="test">

  <ul>
    <li>a</li>
    <li>aa</li>
    <li>aaa</li>
    <li>aaaa</li>
    <li>aaaaa</li>
  </ul>

</div>

Output
       * a
      * aaa
     * aaaaa
    * aaaaaaa
   * aaaaaaaaa

Desired Output

       * a
       * aaa
       * aaaaa 
       * aaaaaaa
       * aaaaaaaaa

我想在一列中对齐所有li项。我使用了display:inline块,但不起作用。我该怎么解决?谢谢您。

5 回复 | 直到 7 年前

DarthJDG chetan borse 7 年前

要使整个列表居中,请切换 text-align 回到 left 在 <ul> ,然后成功 display: inline-block 以…为中心 <div> 作为一个整体。

.test {
  text-align:center;
}

.test > ul {
  text-align: left;
  list-style-position: inside;
  display: inline-block;
}

<div class="test">
  <ul>
    <li>a</li>
    <li>aaa</li>
    <li>aaaaa</li>
    <li>aaaaaaa</li>
    <li>aaaaaaaaa</li>
  </ul>
</div>

你可以移除 list-style-position: inside 这取决于你的风格,因为没有必要将列表居中。

Bhargav Chudasama 7 年前

试试这个

删除 text-align: center; 它的工作

.test {
  list-style-position: inside;
}

<div class="test">
  <ul>
    <li>a</li>
    <li>aa</li>
    <li>aaa</li>
    <li>aaaa</li>
    <li>aaaaa</li>
  </ul>
</div>

Adesh Kumar 7 年前

这样地

.test {
  list-style-position: inside;

}

.test ul{
display:table; 
margin:0 auto;
}

<div class="test">

  <ul>
    <li>a</li>
    <li>aa</li>
    <li>aaa</li>
    <li>aaaa</li>
    <li>aaaaa</li>
  </ul>

</div>

Andrzej ZióÅek 7 年前

我用的是Flexbox。 display: flex; justify-content: center 确保子项与中心垂直对齐。

如果你是新来的,我建议你 this guide 是的。

你可以阅读更多 text-align 作品 here 是的。

片段

.test {
  display: flex;
  justify-content: center;
}

.test ul {
  list-style-position: inside;
}

<div class="test">

  <ul>
    <li>a</li>
    <li>aa</li>
    <li>aaa</li>
    <li>aaaa</li>
    <li>aaaaa</li>
  </ul>

</div>

Andrzej ZióÅek 7 年前

使用 display:flex; justify-content: center; 而不是 text-align: center; 使用 :before 将点更改为 *

.test li {
  position: relative;
  list-style: none;
}

.test li:before {
  content: "*";
  position: absolute;
  left: -13px;
  top: 4px;
}

.test {
  display: flex;
  justify-content: center;
}

<div class="test">
  <ul>
    <li>a</li>
    <li>aaa</li>
    <li>aaaaa</li>
    <li>aaaaaaa</li>
    <li>aaaaaaaaa</li>
  </ul>
</div>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前