使表单输入标签后剩余的100％宽度

Question

基本上我试图创造这个：

这是我到目前为止所做的：jsFiddle。

基本上我已尝试将标签和输入设置为display:block;并使输入具有width:100%;。但这当然会使输入突破新的界限。然后我尝试将white-space:nowrap;添加到p标签中，几乎得到了我需要的效果，但输入则超出了容器边界。

知道如何做这样的事情吗？

Answer 1

以下是仅使用CSS的两种解决方案

解决方案＃1：Flexbox

<强> FIDDLE

在输入上设置flex:1以填充剩余宽度

＆＃13;

＆＃13;

.container {
  width: 500px;
  padding: 40px;
  border: 1px solid black;
}
label {
  display: inline-block;
  padding: 8px 10px 0 0;
}
p {
  display: flex;
}
input {
  -webkit-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  -moz-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  border: 0;
  padding: 10px;
  flex: 1;
}

＆＃13;

<div class="container">
  <form>
    <p>
      <label>*First Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Last Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Street Address</label>
      <input type="text" />
    </p>
    <p>
      <label>Address Line 2</label>
      <input type="text" />
    </p>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

解决方案＃2：内在大小

使用min-content设置标签宽度值，使用Intrinsic Sizing：

label {
    display: table-cell;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

<强> FIDDLE

Browser support对于内在大小实际上非常好 - 除了IE - 目前还不支持这些值。

（编辑：这个特殊的例子似乎只适用于Firefox，而不适用于Chrome，我不知道为什么会这样。）

Answer 2

好吧，我会使用JavaScript来实现这一点，因为CSS 无法进行数学，这就是在不更改HTML或CSS的情况下的样子。

（注意：即使您更改了width的{​​{1}}，这也会有用

Fiddle

上的演示

HTML：

.container

的JavaScript：

<div class="container">
  <form>
    <p>
      <label>*First Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Last Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Street Address</label>
      <input type="text" />
    </p>
    <p>
      <label>Address Line 2</label>
      <input type="text" />
    </p>
  </form>
</div>

CSS：

var fWidth = window.getComputedStyle(document.getElementsByClassName('container')[0]).width.slice(0, -2);
var labels = document.getElementsByTagName('label');
var inputs = document.getElementsByTagName('input');

for (i = 0; i < labels.length; i++) {
  var labelWidth = window.getComputedStyle(labels[i]).width.slice(0, -2);
  var inputWidth = fWidth - labelWidth;
  inputs[i].style.width = inputWidth + 'px';
}