ordered list

[simpli]

hi I have an ordered list of 10 input boxes that are one below the other and I would like to have them 5 on a line instead. How would you suggest I go about this?

 

Thanks,

J-R

[Festy]

Just create a table with 2 columns and 5 rows and put 2 input boxes in each row.

[fry2010]

You dont need to use tables.

 

Apply this rule to your ordered list <li>:

 

.list_li {

display: inline;

margin: 0 5px;

}

 

then set a width to the <ol> tag:

 

.ordered_list {

width: 400px;

}

[fry2010]

theres a better way to have them display with 5 in list you could use a <br /> tag after each 5.

Or seperate them with a <div class="clear"> 

.clear {

float: left;

clear: left;

}

 

[Floydian]

Expanding on fry2010's post, you might try this:

 

Supposing your ordered list has a div that wraps it with a  class of myOrderedList...

 

.myOrderedList {

    float: left;

    width: 500px;

}

 

.myOrderedList ol{

    float: left;

}

 

.myOrderedList li{

    float: left;

    width: 100px;

}

.myOrderedList input{

    width: 100px;

}

 

 

What I'm doing there is floating everything (but the input) to the left since that sort of attaches it all together and any border or bg you might put on that div wrapper will fit nicely, instead of sliding up under the ordered list.

 

The div has a width of 500px which can fit 5 input's/li's.

 

If you add any padding/margin/border to either the ol/li/input, you'll have to increase the 500px width on the div wrapper.

 

[simpli]

Excuse my newbness but I am not familiar with the .xyz format. How should i declare it in the css and how should I use it in the html?

 

for example how would I use this?

.myOrderedList {

    float: left;

    width: 500px;

}

[fry2010]

that . represents a 'class'

 

You know there are two types of css declerations yeah? They are id and class.

You call id once in your page and is represented as such:  <p id="my_id">

You can call a class multiple times on a page as such:  <p class="my_class">

 

The in your style sheet you have:

for the id:  #my_id { ..... }

for the class:  .my_class { ...... }

 

For the above class you have .myOrderedList { ....}

You need to place this in the html element you want to have these attributes as such:

<ol class="myOrderedList">

 

If you are going to use Floydians example you still need to use the

display: inline;

attribute in your

.myOrderedList li { ..... }

 

So looks like this:

 

.myOrderedList li{

float: left;

width: 100px;

display: inline;

}

 

Both methods will do what you require.