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

Question

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

这就是我到目前为止:jsFiddle.

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

知道如何做这样的事吗？

Answer 1

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

解决方案#1:Flexbox

小提琴

设置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:内在大小

使用内在大小调整,通过设置标签宽度的值min-content:

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

小提琴

浏览器对Intrinsic Sizing的支持实际上相当不错 - 除IE之外 - 目前还不支持这些值.

(编辑:这个特殊的例子似乎只适用于Firefox而不是Chrome,我不知道为什么会这样.)