以内联块格式将标签/输入定位在一起答案

【问题标题】：Positioning labels/inputs together in an inline-block format以内联块格式将标签/输入定位在一起
【发布时间】：2017-02-01 16:02:25
【问题描述】：

我在定位两个标签/输入以使其内联但也以块格式显示时遇到问题。我尝试将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>

【问题讨论】：

标签： html css position

【解决方案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;
}

【讨论】：

完美。感谢您的帮助！

【解决方案2】：

放置一个

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

【讨论】：

我正在寻找一种 css 方法。不过还是谢谢。
您可以使用表格元素将输入框并排放置
[label]
[input] [label ]
[输入]
例如。