以内联块格式将 labels/inputs 定位在一起

Question

我在定位两个 labels/inputs 时遇到问题，无法使它们内联，但也以块格式出现。我尝试将 account-input-med 更改为 display: inline、display: inline-block，但它总是使标签显示为内联。

有人看到我需要做什么才能让我的 state/zip label/inputs 看起来像下图吗？

.right-container {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}
.account-label {
    font-size: 1.2em;
    margin: 10px 0;
    font-family: 'Source Sans Pro', sans-serif;
    display: block;
    color: #5E5E5E;
}
.account-input, .account-input-med, .account-input-large {
    padding: 10px;
    font-size: 1.2em;
    font-family: 'Lato', sans-serif;
    margin: 15px 0;
    display: block;
    border: 1px solid #CDCDCD;
    color: #5E5E5E;
}
.account-input {
    width: 80%;
}
.account-input-med {
    width: 30%;
    display: inline-block;
}
.account-input-large {
    width: 40%;
    height: 150px;
}

<div class="right-container">
  <!-- Right Address Container -->
  <h2 class="account-section-subtitle lato">Shipping Address</h2>
  <label class="account-label">City</label>
  <input type="text" class="account-input">
  <label class="account-label">State</label>
  <input type="text" class="account-input-med">
  <label class="account-label">Zip/Postal Code</label>
  <input type="text" class="account-input-med">
</div>

Answer 1

放置一个

    <br/>

在标签之后使输入在新行开始。

例如

      <label class="account-label">City</label>&nbsp
      <label class="account-label">State</label><br/>
      <input type="text" class="account-input">&nbsp
      <input type="text" class="account-input-med">

Answer 2

您可以将输入包装在标签中：

  <label class="account-label">
    <span>State</span>
    <input type="text" class="account-input">
  </label>

Css:

.account-label {
  display: inline-block;
}
.account-input {
  display: block;
}

以内联块格式将 labels/inputs 定位在一起

Positioning labels/inputs together in an inline-block format

html

css

position