html - Bulma:如何对齐元素列表中的列表项

Question

为网站使用 Bulma css。在列表项中使用 ul > li 的类别列表。试图获得像这样的列表项 图片 1

我的解决方案没有在桌面和移动设备的中心正确对齐 图 2

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
	<div class="categories">
        <h3>category</h3>
        <div class="container is-centered is-widescreen">
            <div class="content" style="text-align: center;">
                <div class="columns is-desktop ">
                    <div class="column is-mobile ">
                        <h5 class="">category 1</h5>
                        <ul>
                            <li>Lorem, ipsum dolor</li>
                            <li> amet consectetur adipisicing elit</li>
                            <li>Iusto asperiores tempora</li>
                            <li>accusamus laudantium iure</li>
                            <li> Dignissimos ab </li>
                        </ul>
                    </div>
                    <div class="column is-mobile ">
                        <h5 class="">category 2</h5>
                        <ul>
                            <li>Lorem, ipsum dolor</li>
                            <li> amet consectetur adipisicing elit</li>
                            <li>Iusto asperiores tempora</li>
                            <li>accusamus laudantium iure</li>
                            <li> Dignissimos ab </li>
                        </ul>
                    </div>
                    <div class="column is-mobile ">
                        <h5 class="">category 3 </h5>
                        <ul>
                            <li>Lorem, ipsum dolor</li>
                            <li> amet consectetur adipisicing elit</li>
                            <li>Iusto asperiores tempora</li>
                            <li>accusamus laudantium iure</li>
                            <li> Dignissimos ab </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

在 ul 上使用 flexbox (inline-flex) 和 flex-direction: column 然后重新对齐文本。

div.content ul {
  display: inline-flex;
  flex-direction: column;
}

div.content ul li {
  text-align: left;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<div class="categories">
  <h3>category</h3>
  <div class="container is-centered is-widescreen">
    <div class="content" style="text-align: center;">
      <div class="columns is-desktop ">
        <div class="column is-mobile ">
          <h5 class="">category 1</h5>
          <ul>
            <li>Lorem, ipsum dolor</li>
            <li> amet consectetur adipisicing elit</li>
            <li>Iusto asperiores tempora</li>
            <li>accusamus laudantium iure</li>
            <li> Dignissimos ab </li>
          </ul>
        </div>
        <div class="column is-mobile ">
          <h5 class="">category 2</h5>
          <ul>
            <li>Lorem, ipsum dolor</li>
            <li> amet consectetur adipisicing elit</li>
            <li>Iusto asperiores tempora</li>
            <li>accusamus laudantium iure</li>
            <li> Dignissimos ab </li>
          </ul>
        </div>
        <div class="column is-mobile ">
          <h5 class="">category 3 </h5>
          <ul>
            <li>Lorem, ipsum dolor</li>
            <li> amet consectetur adipisicing elit</li>
            <li>Iusto asperiores tempora</li>
            <li>accusamus laudantium iure</li>
            <li> Dignissimos ab </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>