Bulma：如何为项目列表对齐列表项答案

【问题标题】：Bulma: How to align list items in line for list of itemsBulma：如何为项目列表对齐列表项
【发布时间】：2019-12-06 11:54:47
【问题描述】：

为网站使用 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>

【问题讨论】：

标签： html css flexbox bulma

【解决方案1】：

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

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>

【讨论】：

谢谢。但它不工作有问题的 Image1。
我希望列表项以如图 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 style="list-style-type:none;text-align:center;">
                            <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 style="list-style-type:none;text-align:center;">
                            <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 style="list-style-type:none;text-align:center;">
                            <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>

【讨论】：

【解决方案3】：

你可以使用css作为ul标签

style="display:inline-block"

【讨论】：