将标签/输入以内联块格式放在一起

Question

我在定位两个标签/输入以使其内联时出现问题，但也以块格式显示。我尝试将account-input-med更改为display: inline，display: inline-block，但它始终使标签显示为内嵌。

有没有人看到我需要做些什么才能使我的州/邮政标签/输入显示如下图所示？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

的CSS：

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

Answer 2

放置一个

    <br/> 

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

e.g。

      <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">