Question

I'm trying to make some input boxes with text infront of it, but each time i style the text in CSS, the styling forces my input box "to a new line". In the image the first 2 text parts is unstyled, and the next 4 is. I want my styled texts not to create a new line.

Image: http://puu.sh/8kPKl.png

The html part:

<h0>Fulde navn:</h5> <input type="text" name="name"><br>
<h0>E-mail:</h5> <input type="text" name="email"><br>
<h5>Telefon nr:</h5> <input type="text" name="tlf"><br>
<h5>Antal personer:</h5> <input type="text" name="pers"><br>
<h5>Flytype:</h5> <input type="text" name="type"><br>
<h5>Betalingsform:</h5> <input type="text" name="betal"><br>

And the CSS part:

#four h5 {
    font-size: 20px;
    color: #ffffff;
}
Was it helpful?

Solution

Heading elements are block level elements by default. Try adding display:inline

#four h5 {
    font-size: 20px;
    color: #ffffff;
    display: inline;
}

inline-block works as well.

fiddle: http://jsfiddle.net/5SEre/

OTHER TIPS

Three things here:

1. Your first two headings are <h0>'s

Make them <h5>'s

2. That extra space below the <h5>'s is a margin:

#four h5{
    margin: 0;
}

3. Block Elements

As pointed out by @DrydenLong in his answer, headings are block elements, and so they automatically render on their own line. You can fix this by setting them to be inline or inline-block elements:

#four h5{
    display: inline;
    //or
    display: inline-block;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top