Question

我有2个包含UL元素的div，我想并排排列。基本思想是有2个菜单元素 - 一个对齐左，一个对齐。现在，当我设置width:50%和display:inline-block时，元素会分开显示。

有问题的div是.bottomMenuRight和。bottomMenuLeft。

我无法弄清楚我做错了什么。

HTML：

<div class="outer">
  <div class="middle">
    <div class="navMenu">
      <ul>
        <li>Add</li>
        <li>Browse</li>
      </ul>
    </div>
    <hr>
    <div class="test">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellat ab minus dolore officia, ex praesentium necessitatibus dolorem, aperiam, porro ullam eius quas itaque, nostrum doloremque provident quam neque obcaecati.</div>
      <div>Architecto blanditiis sed obcaecati, quas possimus expedita molestiae quaerat facilis saepe doloribus numquam velit. Praesentium modi sed consequuntur voluptates dicta, exercitationem laboriosam, repellat quam itaque repellendus harum, blanditiis
        iure error.</div>
      <div>Ut perferendis nam totam neque facilis officia maxime animi velit, recusandae voluptatibus, aut rem in et ipsam quia id unde itaque quae, incidunt provident iste, sit? Corporis dicta, in ex.</div>
      <div>Doloremque inventore quos, qui maiores libero dolor veritatis, earum molestias unde autem optio, culpa ex quia error iure. Eos quos, mollitia nam quis incidunt sit voluptate amet, eveniet iusto eligendi.</div>
      <div>Odit cum laborum dolor delectus consectetur architecto, animi ipsum aperiam libero eveniet neque inventore quasi, facere quo sint possimus, tempore doloremque eius perferendis beatae? Laboriosam tempora id architecto quisquam enim?</div>
    </div>
    <hr>
    <div class="bottomMenu">
      <div class="bottomMenuLeft">
        <ul>
          <li>F</li>
          <li>T</li>
        </ul>
      </div>
      <div class="bottomMenuRight">
        <ul>
          <li>O</li>
          <li>D</li>
          <li>U</li>
        </ul>
      </div>
    </div>
    <div class="inner">
    </div>
  </div>
</div>

的CSS：

.outer {
  display: table;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body {
  background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/paper_2.png");
}

.test {
  width: 40%;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-family: 'Libre Baskerville', serif;
  text-align: center;
}

.bottomMenu {
  width: 100%;
}

.bottomMenuRight,
.bottomMenuLeft {
  display: inline-block;
  width: 50%;
}

.bottomMenuRight ul,
.bottomMenuLeft ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bottomMenuRight ul {
  text-align: right;
}

.bottomMenuLeft ul {
  text-align: left;
}

.bottomMenuRight li,
.bottomMenuLeft li {
  display: inline-block;
  background-color: grey;
  padding: 0.5em;
  font-size: 1.5em;
  border-radius: 50%;
}

这是一个codepen，以防你想要摆弄。

Answer 1

事情是内联块。内联块增加了额外的间距，通常通过设置父字体大小来取消：0，但是......

更简单的方法是float这两个元素并将clearfix应用于容器。 clearfix最快的解决方案是overflow: hidden

使用内联块时，包含UL宽度为50％的Div将无法正确排列

1 个答案: