jquery - 如何使2个div标签彼此相邻

Question

我试图将这 2 个 div 并排放置。州和邮政编码。我知道 div 是 block 元素，但我在 css 中设置了 inline-block 属性。那也附上。我怎样才能让 State 和 Zipcode 彼此相邻？我一直在尝试不同的事情并且对此感到沮丧。任何帮助表示赞赏!谢谢:)

.dataControl {
  display: inline-block;
  margin: 5px 15px;
  border-width: 1px;
}
.dataControlSmall {
  width: 25%;
}
.dataControl45 {
  width: 45%;
}

<div class="dataControl dataControlSmall">
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtState" style="display: block;">State</label>
    <input id="txtState" name="txtState" class="k-textbox" style="width:35px; display: block;" maxlength="2" required="required" data-bind="value: State" />
  </div>
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtZip" style="display: block;">Zip Code</label>
    <input id="txtZip" name="txtZip" class="k-textbox" style="width:90px; display: block;" maxlength="10" required="required" data-bind="value: Zip" />
  </div>
</div>

Answer 1

设置display:inline-block 后，只需确保两个元素或其中元素的总宽度小于或等于其父元素的100% .如果两者的组合宽度大于父级的宽度，则第二个将显示在下一行。

.dataControl {
  display: inline-block;
  margin: 5px 15px;
  border-width: 1px;
}
.dataControlSmall {
  width: 100%;
}
.dataControl45 {
  width: 45%;
}

<div class="dataControl dataControlSmall">
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtState" style="display: block;">State</label>
    <input id="txtState" name="txtState" class="k-textbox" style="width:35px; display: block;" maxlength="2" required="required" data-bind="value: State" />
  </div>
  <div class="dataControl dataControl45" style="float: left; display: block;">
    <label for="txtZip" style="display: block;">Zip Code</label>
    <input id="txtZip" name="txtZip" class="k-textbox" style="width:90px; display: block;" maxlength="10" required="required" data-bind="value: Zip" />
  </div>
</div>