Question

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

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

我已经达到了第一个和第四个要求，但我在输入填充行并垂直对齐时遇到了问题。

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

LESS：

* {
  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 - 意图是＆＃34;跳过＆＃34;第一个伪细胞。为此，我将其定义为：

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

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

.full-width - 旨在使其内容成为＆＃34; table＆＃34;的全部宽度。为此，我将其定义为：

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

表格标题跨越表格的整个宽度。我知道我只会按下这个按钮，所以我强迫它在caption-side的底部。

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

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

1 个答案: