html - 彼此相邻的中心列

Question

我正在使用 bootstrap，我有 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

在container旁边再创建一个class，并尝试让class有display:inline-flex的属性

你可能有 display:block 这就是为什么它被放置在顶部、中间和底部。