html - 使表单输入标签后剩余内容的 100% 宽度

Question

基本上我正在尝试创建这个:

这是我目前所拥有的:jsFiddle .

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

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

Answer 1

这里有两个单独使用CSS的解决方案

解决方案 #1:Flexbox

FIDDLE

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

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

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

解决方案 #2:内部尺寸调整

使用Intrinsic Sizing通过使用 min-content 设置标签的宽度值:

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

FIDDLE

Browser support对于 Intrinsic Sizing 实际上非常好 - 除了 IE - 目前尚不支持这些值。

(编辑:这个特定示例似乎只适用于 Firefox 而不适用于 chrome，但我不确定为什么。)