CSS tables?

Looking for a way to display this in one line horizontally across the top of the page, instead of down the page. Just have a look and you will see what I mean. I want the varities of peppers to be all together on one line, with the H tags and pepper names.


http://www.forgeinfinity.com/canam/hot-jalapeno-peppers.html
fadercreepAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
You can try this

1. Change your <ul> to
<ul id="pepper-list">

Open in new window

2. Add the following to your style sheet
#pepper-list {
    list-style: none;
}
#pepper-list li:before {
    content: "-";
    padding: 0 5px;
}
#pepper-list li:first-child:before {
    content: "";
    padding: 0;
}
#pepper-list li {
    display: inline-block;
}

Open in new window


If you don't want the hyphens in between the items then
#pepper-list {
    list-style: none;
}
#pepper-list li {
    padding: 0 5px;
}
#pepper-list li:first-child {
    padding: 0;
}
#pepper-list li {
    display: inline-block;
}

Open in new window

0
 
duncanb7Commented:
just use

your tag   {
display:inline;
}

that will display on items in your tag in horizontally, for example,

<ul>
<li>A</li>
<li>B</li>
</ul>

so
ul {

display:inline;

}

output will be  A B

not
A
B

Duncan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.