Html 无法将标签放在一行上，并在下一行同时输入和选择

在这个问题上有点纠结。如果需要，我可以轻松地将标签和输入放在同一行上，或者在需要时放在单独的行上。。。但是，到目前为止，试图在一行上完成一个标签，并将输入和选择放在一起是徒劳的

所以，我试着。。。我尝试将标签设置为块元素，然后输入并选择两个内联块。你可以看到我的2条注释掉的CSS规则。我尝试了标签宽度100%和其他东西

它要么在一行上完成所有3个，要么全部3个作为块。我有一种感觉，这是因为标签被包裹在它们周围，但这并不重要，因为我可以轻松地操作标签和输入，但当涉及到标签、输入、选择时，它不想工作

我想到的一种丑陋的方法是绝对定位select，但我希望有一种更合适的方法。我不确定这是否有效。我喜欢一个干净的解决方案，只要可能和绝对定位这似乎是一个糟糕的方式试图解决它。也许我忽略了一些简单的事情。。。这就是我来这里的原因

有什么想法吗？我也不太在乎老版本的浏览器

我要找的是。。。照小提琴

。。。 城市这是一个标签，坐在这里 标签下的输入

电话号码标签在这里 在此处输入选择此处

.形成外部容器， .主按钮{ 字号：1.025em； } .形成外容器{ 填充：8px 12px； 背景色：FCFC； 边界半径：3px； 宽度：100%； 溢出：自动； 显示：内联块； } 保险商实验室{ 保证金：0； 填充：0； } ul>li{ 列表样式：无； 保证金：3px0； 填充：2px2px； } li>标签{ 显示：块； 文本对齐：左对齐； } li>标签>输入， li>标签>文本区域{ 显示：块； } li>标签>输入[类型=复选框]{ 显示：内联； } 输入[类型=文本]， 输入[类型=密码]， 文本区{ 颜色：0a290a； 边框：1px实心暗灰色； } .标签输入选择组合>输入， .标签输入选择组合>选择{ /*显示：内联块*/ } .标签输入选择组合{ /*显示：块！重要*/ } 住址 城市 国 电话号码 可移动的 工作 家 另外 创造

---

输入为全宽。您需要将其设置为内联块。这将把它放在同一条线上，它的前面和后面是什么。在电话号码后加上或在电话号码周围加一个div，使其在输入时不在同一行。

这里有两个可能的选项：

包装电话号码输入，选择a中的下拉菜单，并显示：flex

在标签文本后添加一个标记，然后给输入一个显示：inline block

像这样：

.形成外部容器， .主按钮{ 字号：1.025em； } .形成外容器{ 填充：8px 12px； 背景色：FCFC； 边界半径：3px； 宽度：100%； 溢出：自动； 显示：内联块； } 保险商实验室{ 保证金：0； 填充：0； } ul>li{ 列表样式：无； 保证金：3px0； 填充：2px2px； } li>标签{ 显示：块； 文本对齐：左对齐； } li>标签>输入， li>标签>文本区域{ 显示：块； } li>标签>输入[类型=复选框]{ 显示：内联； } 输入[类型=文本]， 输入[类型=密码]， 文本区{ 颜色：0a290a； 边框：1px实心暗灰色； } .输入块{ 显示器：flex； } .左输入{ 显示：内联块； } 住址 城市 国 电话号码 可移动的 工作 家 另外 电话号码 可移动的 工作 家 另外 创造

---

您正在标记标签中包装所有内容。标签仅用于说明。您需要通过以下方式进行更改：

<label class="label-input-select-combo">Phone number</label>
<input type="text" data-bind="phone" placeholder="905-999-3590" tabindex="6">
<select data-bind="type">
  <option value="M">Mobile</option>
  <option value="W" selected>Work</option>
  <option value="H">Home</option>
  <option value="O">Other</option>
</select>

---

非常感谢。这确实有效。我并没有尝试这样做，因为我能够将标签和输入放在它们自己的行上，即使标签缠绕在这两行上。我猜将标签包装在两个元素上会导致其行为不同。有趣的你知道为什么输入和选择都不起作用吗？当它只围绕输入工作时？MDN规范规定允许在标签内部进行选择，也允许输入。但是，它并没有同时提到这两个方面……当您将标签环绕在输入周围时，它允许更大范围的单击来启动输入。您的答案确实有效，但是发布的Flex选项更接近于我所寻找的，并且允许我将标签包装在输入和选择上。感谢您抽出时间回复。非常感谢。我会试试看。。。另外，感谢您格式化代码。。。我以为我做对了。。。当我按CTRL+K缩进代码时，我一定是做错了什么。您正确地添加了格式化代码。另一个选择

---

n是添加一个代码片段-啊，谢谢！下次我会找那个选项的！用你的方式看起来更好！：此外，您的解决方案比其他解决方案更有效。虽然它们都能工作，但最好将标签包裹在两者周围。我也喜欢Flex的线条。谢谢你抽出时间！非常感谢！我确实觉得很有趣，我可以很容易地将标签和输入放在单独的行上，但是在标签中添加select和输入似乎会导致它的行为不同。没有选择在那里。。。只需操纵标签和输入就很容易了。我希望这三个都能被操纵。我对Flex非常满意，因为我在使用网格的非常复杂的表单上。。。所以，flex没有打扰我。支持面相当广。此外，MDN文档中的UL/LI中似乎不允许使用div，这是有道理的，因此其他人发布的div选项无效，除非我移动标签。