中心列彼此相邻

时间:2019-02-01 03:12:28

标签: html css

我正在使用引导程序,我有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>

2 个答案:

答案 0 :(得分:1)

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

的属性。

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

答案 1 :(得分:-1)

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