通过适当的文本换行垂直排列输入字段

Question

我正在尝试创建一些注册框，其标签和输入始终是水平对齐的。为此，我使用了列表元素，其中每个列表都包含标签和输入。

    #container {
    	background-color: rgb(229, 229, 229);
    }
    
    #lcontainer {
    	list-style-type: none;
    }
    
    #lcontainer li {
    	width: 100%;
    	white-space: nowrap;
    }
    #lcontainer li label {
    	word-break: break;
    	white-space: pre-wrap;
    }
    #lcontainer li input {
    	display: inline-block;
    	white-space: normal;
    }

 <div id="container">
    	<ul id="lcontainer">
    		<li>
    			<label>some text</label>
    			<input></input>
    		</li>
    		<li>
    			<label>some bigger text</label>
    			<input></input>
    		</li>
    		<li>
    			<label>some bigger bigger text</label>
    			<input></input>
    		</li>
    		<li>
    			<label>some bigger bigger bigger text</label>
    			<input></input>
    		</li>
    		<li>
    			<label>some smaller one</label>
    			<input></input>
    		</li>
    	</ul>
    </div>

可见，标签的宽度不同，但文本字段的宽度必须相等。

第一个问题是，在ul的某个大小，input元素包装。我只需要一个标签来包装，所以我使用了white-space属性，但不幸的是它没有效果（即使元素的显示属性为inline-block）

如何在不包装输入元素的情况下排列输入元素（因此只有标签包装负责同等地输入元素）？

谢谢！

Answer 1

这是你想要的吗？

我已经制作了输入和标签

  display: inline-block;
  vertical-align:middle;

我还给标签固定宽度，以便输入正确对齐。

＆＃13;

＆＃13;

#container {
  background-color: rgb(229, 229, 229);
}

#lcontainer {
  list-style-type: none;
}

#lcontainer li {}

#lcontainer li label {}

#lcontainer li input {}

label {
  width: 100px;
  display: inline-block;
  vertical-align:middle;
}

input {
  display: inline-block;
  vertical-align:middle;
}

＆＃13;

<div id="container">
  <ul id="lcontainer">
    <li>
      <label>some text</label>
      <input/>
    </li>
    <li>
      <label>some bigger text</label>
      <input/>
    </li>
    <li>
      <label>some bigger bigger text</label>
      <input/>
    </li>
    <li>
      <label>some bigger bigger bigger text</label>
      <input/>
    </li>
    <li>
      <label>some smaller one</label>
      <input/>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;