Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to put web form elements on a new line?

Tags:

html

css

How to place "input" elements on new lines? In the above example all elements are placed sequentially, ie lable->input->lable->input, etc.

/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    padding:14px;
}
#stylized{
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:right;
    float:left;
}
#stylized input{
    float:left;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */

    <div id="stylized" class="myform">
        <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <label>Name: </label>
        <input type="text" name="name" id="name"/>
        <label>Email: </label>
        <input type="text" name="email" id="email"/>
        <label>Password: </label>
        <input type="text" name="password" id="password"/>
        </form>
    </div>
like image 457
Klausos Klausos Avatar asked Apr 27 '12 10:04

Klausos Klausos


People also ask

How do I move an element to the next line in HTML?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return).

How do you move the input to the next line?

Press Shift and Enter for a new line.

How do you display a label and input on another line?

Two: [a \/] and so on... then labels are not on the same line as the form fields. Is the only solution: <div><label for="one">One:</label> <input type="text" id="one"></div> ...

How do I move text to the next line in CSS?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.


1 Answers

#stylized input{
    display: block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

This will put every input on a new line. - Removed "float: left", added "display: block".

like image 99
KBN Avatar answered Oct 12 '22 13:10

KBN