Question

我在下面有这个代码。我有一个带有2个内部div的容器div。我希望两个内部div并排，所以我在两个div上使用了内联块。另外，我希望这两个div能够从头开始。在下面的演示中，他们被困在顶部，我不知道为什么在我自己的项目中他们并排，但第一个div开始在顶部，而第二个div没有开始在顶部。

最好的css风格是什么才能使容器中的2 div在它们并排的顶部开始？

将两个div并排的最佳方法是什么？

＆＃13;

.homissync {
  display: block;
  height: 100%;
}

.homissync>div {
  padding: 27px;
  margin: 3px;
  display: inline-block;
}

#homissyncbuttons {
  height: 100vh;
  width: 20%;
  margin: 3px;
}

#homissynclist {
  height: 100vh;
  margin: 3px;
  width: 68%;
}

#homissyncbuttons .libuttons {
  width: 100% !important;
  background-color: #ff0000;
}

.vBorder {
    border: solid 1px #ddd;
}

button, input[type=submit] {
    padding: 8px 20px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
    background-color: orange;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 3px;
    border: 0;
    outline: none !important;
    margin: 3px 0;
    cursor: pointer;
    transition: background 1s ease-in-out;
}

＆＃13;

<div class=" homissync">
  <div id="homissyncbuttons" class=" vBorder">
    <ul>
      <li>
        <button class="libuttons">UACS</button>
      </li>
      <li>
        <button class="libuttons">Medicine</button>
      </li>
      <li>
        <button class="libuttons">Non-Drugs</button>
      </li>
      <li>
        <button class="libuttons">Miscellaneous</button>
      </li>
    </ul>



  </div>
  <div id="homissynclist" class=" vBorder">
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
    <div id="homissynclistresult" class=" vPadding vBorder">



    </div>

  </div>

</div>

＆＃13;

Answer 1

请尝试使用此代码而不是display:inline-block;，只需添加float:left。

.homissync>div {
    display: block;
    float: left;
}

Answer 2

您可以使用float: left;代替display: inline-block;

＆＃13;

.homissync {
  display: block;
  height: 100%;
}

.homissync>div {
  padding: 27px;
  margin: 3px;
  float:left;
}

#homissyncbuttons {
  height: 100vh;
  width: 20%;
  margin: 3px;
}

#homissynclist {
  height: 100vh;
  margin: 3px;
  width: 65%;
}

#homissyncbuttons .libuttons {
  width: 100% !important;
  background-color: #ff0000;
}

.vBorder {
    border: solid 1px #ddd;
}

button, input[type=submit] {
    padding: 8px 20px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
    background-color: orange;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 3px;
    border: 0;
    outline: none !important;
    margin: 3px 0;
    cursor: pointer;
    transition: background 1s ease-in-out;
}

＆＃13;

<div class=" homissync">
  <div id="homissyncbuttons" class=" vBorder">
    <ul>
      <li>
        <button class="libuttons">UACS</button>
      </li>
      <li>
        <button class="libuttons">Medicine</button>
      </li>
      <li>
        <button class="libuttons">Non-Drugs</button>
      </li>
      <li>
        <button class="libuttons">Miscellaneous</button>
      </li>
    </ul>



  </div>
  <div id="homissynclist" class=" vBorder">
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
    <div id="homissynclistresult" class=" vPadding vBorder">



    </div>

  </div>

</div>

＆＃13;

Answer 3

display:inline-block默认为white space，您需要删除空白区域。否则您需要使用display-inline-block重新float:left，有很多选项可以删除空白区域，请查看下面的参考链接

Why is there an unexplainable gap between these inline-block div elements?

在线div不是并排的

3 个答案: