html - 将标签和自动调整大小输入保持在同一行

Question

我有一个带有标签和输入的简单表单。我希望标签显示在左侧，字段显示在右侧以填充可用的水平空间。所有这一切都没有固定大小，也没有 JavaScript。

看似简单的任务，但我没能完成。或者我将它们放在同一行但输入未填充空间，或者我将输入填充可用空间但它们出现在不同的行...

这是我展示后一个结果的示例，这是我迄今为止得到的最好结果:

HTML

<div class='form'>
  <div class='field'>
    <label>Name</label>
    <input/>
  </div>
  <div class='field'>
    <label>Description</label>
    <input/>
  </div>
</div>

CSS

.form {
    margin: 32px;
    padding: 16px;
    background-color: #eee;
}

.field * {
    display:inline-block;
}

.field label {
    width: 100px;
}

.field input {
    width: 100%;
}

JSFiddle:https://jsfiddle.net/Ucodia/9659vzhe/

感谢您的帮助:)

Answer 1

也许您可以将它们显示为表格。如果您的标签很短，这会很有效。你可能会有一些副作用。较长的标签(> 100 像素)将导致文本换行并且标签垂直增长。这可能会导致输入随之增长，这可能看起来很奇怪。除此之外，这非常可靠。

.form {
    margin: 32px;
    padding: 16px;
    background-color: #eee;
}

/* The container is the table. It defines the space around the inputs */
.field {
    display: table;
    width: 100%;
    border-spacing: 0 5px;
}

.field * {
    display:table-cell;
}

.field label {
    width: 100px;
}

.field input {
    width: 100%;
}

<div class='form'>
  <div class='field'>
    <label>Name</label>
    <input/>
  </div>
  <div class='field'>
    <label>Description</label>
    <input/>
  </div>
</div>