html - 进行输入并选择填充剩余宽度

Question

我正在尝试设置一个表单:

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

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

这是我目前的进展: 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%;
  }
}

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

Answer 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，无论是用一种威胁的方式。