输入并选择填充剩余宽度答案

【问题标题】：Making inputs and selects fill remaining width输入并选择填充剩余宽度
【发布时间】：2014-06-04 14:49:44
【问题描述】：

我正在尝试设置这样的表单：

所有输入都将水平对齐，即使它们没有标签。
当标签换行时，输入将在其行内垂直对齐。
输入将拉伸以填充剩余空间（或压扁）
提交按钮将填满一整行。

我已经达到了第一个和第四个要求，但我无法让输入填满行并垂直对齐。

这是我到目前为止的进展： http://jsbin.com/kozozabo/3/edit?html,css,output

少：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#narrow-form {
  width: 300px;
  overflow: hidden;

  padding-right: 0.5em;
}

#wide-form {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  margin-left: 300px;
}

.row {
  @label-width: 100px;

  width: 100%;
  overflow: hidden;

  label {    
    width: @label-width;
    float: left;
    display: inline-block;
  }

  .no-label {
    margin-left: @label-width; 
  }

  input, select {
    /* Trying to make these aligned to the right of 
     * their respective labels filling any remaining   
     * width.
     */
    display: inline-block;
  }

  button {
    width: 100%;
  }
}

我尝试使用与标签相同宽度的左边距为输入提供绝对定位，但这不起作用。

【问题讨论】：

你可以在它们周围制作一个容器并让输入 100%？
你可以用一张桌子。
我希望不必更改 DOM，因为此表单是由 javascript 构建的。我已经设法使用display 和table* 属性获得了一个版本，但是在对齐无标签输入时没有遇到问题。 jsbin.com/kozozabo/5/edit

标签： html css forms

【解决方案1】：

好的，我想出了一个我很满意的解决方案。不幸的是，它确实涉及一些表格滥用。

我只在 Chromium 中对此进行了测试。

http://jsbin.com/kozozabo/5/edit?output

我将表单设置为display: table，每个.row 设置为display: table-row，标签、输入、选择和按钮设置为display: table-cell。

这使得所有东西都排成一行并填满了所有可用空间。

然后我添加了两个新的类，打算作为 .row 类的词缀，这就是真正的表格滥用开始的地方。

.no-label - 意图“跳过”第一个伪单元。为此，我将其定义为：

.no-label:before {
  content: "";
  display: table-cell;
}

本质上是插入一个隐藏单元格，强制后续输入位于第二列中。

.full-width - 旨在使其内容成为“表格”的整个宽度。为此，我将其定义为：

.full-width {
  display: table-caption;
  caption-side: bottom;
}

表格标题横跨表格的整个宽度。我知道我只会对按钮执行此操作，所以我用caption-side 强制它位于底部。

将 DOM 定义为表格会更好，但我不想重新编程设置此表单的 javascript。我总是不会玩css，一切都是以一种威胁的方式。

【讨论】：