Question

我正在使用引导程序，我有3个无序列表项，并且其中有列表项，因此我试图将3列彼此居中放置，因此左对齐中央右对齐

我将它们放在正确的位置上，到目前为止它们的排列正确，但是它们彼此不相邻，它们位于页面的顶部，底部和中间。到目前为止，我已经尝试了很多方法，但都没有成功。

<div class="container">



        <div class="colmask">
            <div class="box box_1">
              <div class="text-left">
                <h4>Left col</h4>
                <ul>
                    <li><a href="item 1">one</a></li>
                    <li><a href="item 2 >Two</a></li>
                    </ul>
                  </div>
                </div>


<div class="text-center">
                <h4>Center col</h4>
                <ul>
                   <ul>
                    <li><a href="item 1">one</a></li>
                    <li><a href="item 2 >Two</a></li>
                    </ul>
                  </div>
                </div>
                </ul>

<div class= "text-right">
                <h4>Right col</h4>
                <ul>
              <li><a href="item 1">one</a></li>
                 <li><a href="item 2 >Two</a></li>
                </ul>
              </div>
            </div>
        </div>
      </div>

Answer 1

在容器旁边创建另一个类，并尝试使该类具有display：inline-flex

的属性。

您可能会有display：block，这就是为什么它位于顶部，中间和底部。

Answer 2

             Lorem ipsum
        多洛尔·阿梅特               Lorem ipsum
    多洛尔·阿梅特

中心列彼此相邻

2 个答案: