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

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

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

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

1 个答案: