居中标题开始处的列表项左对齐

时间:2018-07-22 23:46:05

标签: html css

我有4个居中的标头,我希望能够在每个标头下方列出项目。我希望它们首先居中,然后从居中的标头开始,然后保持对齐。

我不能真正发布所有要显示的代码以显示其在我的应用程序中的状态,但是我将发布代码段和图片:

<div class="row-fluid">
  <div class="span3 text-center">
    <h5>Header 1</h5>
    <ul class="unstyled">
      <li>Aaaaaaaaaaa</li>
      <li>bbb</li>
    </ul>
  </div>
  <div class="span3 text-center">
    <h5>Header 2</h5>
    <ul class="unstyled">
      <li>1111</li>
      <li>11</li>
      <li>111111111111111</li>
    </ul>
  </div>
  <div class="span3 text-center">
    <h5>Header 3</h5>
    <ul class="unstyled">
    </ul>
  </div>
  <div class="span3 text-center">
    <h5>Header 4</h5>
    <ul class="unstyled">
    </ul>
  </div>
</div>

我希望列表项从红线开始处开始:

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您只想将列表的内容移到左侧,则可以像这样调整填充:

ul {
   padding-left: 18px;
}

或者,如果您也想摆脱项目符号,那么看起来就像您张贴的图片一样

ul {
  list-style: none;
  padding-left: 0;
}

应该工作。