CODEWITHSUNDEEP
htmlcssflexbox
Rimita Goni
Rimita Goni

Reputation: 71

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

Two labels get separated by a line. I need to fix that(Look at First Name, Last Name) enter image description here

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

I don't know if they will help but here I wrote some useless css for it

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

Upvotes: 1

Views: 2009

Answers (2)

jade
jade

Reputation: 811

you can use 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>

Upvotes: 3

Kasper
Kasper

Reputation: 114

Not sure what you really want. I think you want them to be seperate by a new line. If you change the flex-direction to "column" instead of "row". It will divide them by space instead of being up against eachother.

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

Upvotes: 0

Related Questions