html - 以内联 block 格式将标签/输入定位在一起

Question

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

有没有人看到我需要做什么才能让我的状态/zip 标签/输入显示如下图？

.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

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

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

CSS:

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