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

Question

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

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

Answer 1

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

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

Answer 2

你可以使用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>

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

How to place a label on a single row/ on a single line

html

css

flexbox