A CSS question on layout horizontally

I am not very familiar with CSS. I have two li elements, each of them contain a label and input field. I would like to style them so that the "li**.input_two*" is located after "li*.input_one**" horizontally. What is the CSS for this?

<li class="input_one" id=开发者_如何学运维"first_input">
  <label>name</label>
  <input id="the_name" type="text"/>
</li> 

<li class="input_two" id="second_input">
  <label>age</label>
  <input id="the_age" type="text"/>
</li> 

There are a number of different options, depending on:

• Browser compability requirements (i.e, do I need to support IE6)
• Am I willing to specify a width?
• Am I willing to use a clearfix hack or additional markup to clear floats?

Two different options:

li.horizontal {
  display: inline-block;
  *display: inline; /* Hack for IE */
  zoom: 1;
}

Or, using floats:

li.horizontal {
  float: left;
  width: X%; /* You should always give a float an explicit width
                to avoid browser compability issues */
}

I would use the display inline property for the list *#menu li {display:inline;} *

http://www.webreference.com/programming/css_lists/

If you want the label and the input next to each other then something like this should do this trick:

.input_one label,
.input_one input
{
    float:left;
}

If you want the two li's next to each other then try this:

li
{
    float:left;
}