Need CSS to make all fields in-line when shown within a browser [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

Hey guys just a simple problem with CSS. I want my form fields to be in-line. I need the CSS to make my fields preview in a browser in-line. For example:

Input type: color...................Field goes here

Input type: date....................Field goes here

Input type: datetime.............Field goes here

Input type: datetime-local.....Field goes here and so on...

Input type: email...................Field goes here and so on...

Input type: month

Any support will be much appreciated! Thank you.

Answer 1

There are a multiple ways you could do it. Here are a couple examples:

Example One:

<ul>
    <li>
        <label for="color">Color:</label> 
        <input id="color" type="text" value="color" />
    </li>
    <li>
        <label for="date">Date:</label>
        <input id="date" type="text" value="date" />
    </li>
</ul>

CSS: (very little css needed)

ul {
    padding:0;
    margin:0;
    list-style:none;
}
label {
  width:40px;
  display:inline-block;
}

http://jsfiddle.net/4GkLb/2/

Example 2:

And another way with no CSS(Let the browser do the work)

<div>
    <label for="date">Date:</label>
    <input id="date" type="text" value="date" />
</div>
<div>
    <label for="date">Color:</label> 
    <input id="date" type="text" value="color" />
</div>

http://jsfiddle.net/QedEB/

note:

To get the fields to align you will need to add a width to the labels (like example 1). However this (imo) is a simpler / more semantic way to code the HTML in order to force line breaks after each "label input group". See With CSS

This format is most similar to Bootstrap which I prefer, seems most semantic in most cases. However that depends on content / data. http://getbootstrap.com/css/#forms