如何将标签放在单行/单行上答案

【问题标题】：How to place a label on a single row/ on a single line如何将标签放在单行/单行上
【发布时间】：2022-02-08 23:31:10
【问题描述】：

两个标签被一条线分开。我需要解决这个问题（查看名字，姓氏）

<section id="names">
    <B>First Name:</B><input type="text" name="Name" id="name">
    <B>Last Name:</B><input type="text" name="Surname" id="surname">
</section>

我不知道他们是否会有所帮助，但在这里我为它写了一些无用的 css

#names {
    display:flex;
    flex-direction: row;
    float: left;
}

【问题讨论】：

您提到了labels，但您实际上并没有使用label 标签来控制它。如果您希望它们位于不同的行上，请使用 flex-direction:column;
试试width: max-content;
你不应该在 flex 中使用浮点数。真的，你根本不应该使用浮点数。它们是一种古老的技术，几乎没有合法的现代用途。请参阅css-tricks.com/snippets/css/a-guide-to-flexbox 了解如何正确对齐内容。
在自然状态下，它们（名字和姓氏）排成一行。除非#name 的宽度有限。

标签： html css flexbox

【解决方案1】：

你可以使用white-space: nowrap;

#names {
    display:flex;
    flex-direction: row;
    float: left;
}

label {
  white-space: nowrap;
}

<section id="names">
    <!--use proper tags-->
    <label for="name">
       <b>First Name:</b>
    </label>
    <input type="text" name="Name" id="name">
    <label for="surname">
       <b>Last Name:</b>
    </label>
    <input type="text" name="Surname" id="surname">
</section>

【讨论】：

【解决方案2】：

不确定你真正想要什么。我认为您希望它们被一条新线分开。如果您将flex-direction 更改为“column”而不是“row”。它将按空间划分它们，而不是相互对抗。

#names {
    display:flex;
    flex-direction: column;
    float: left;
}

<section id="names">
    <B>First Name:</B><input type="text" name="Name" id="name">
    <B>Last Name:</B><input type="text" name="Surname" id="surname">
</section>

【讨论】：

我想我没有写得更简洁。我想要的是标签不会被切成两行/两行，而是保持在同一行。像这样，“1）名字”，而不是“1）名字 2）名字”
如果是这种情况，那么添加 white-space: nowrap 应该可以解决它
点赞@jade 回答
非常感谢！