By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

two lists in one line

P: 24
I have two lists in my page. I want to have them in one line. My code is:

<html>
<head><title>my first page</title></head>
<body>
<ul>
<li>apple
<li>cherry
<li>peach
<li>apricot
</ul>
<ol>
<li>tomato
<li>cucumber
<li>carrot
<li>beetroot
</ol>
</body>
</htm>
Feb 24 '07 #1
Share this Question
Share on Google+
7 Replies


P: 99
I have two lists in my page. I want to have them in one line. My code is:

<html>
<head><title>my first page</title></head>
<body>
<ul>
<li>apple
<li>cherry
<li>peach
<li>apricot
</ul>
<ol>
<li>tomato
<li>cucumber
<li>carrot
<li>beetroot
</ol>
</body>
</htm>

use the css style float.
Expand|Select|Wrap|Line Numbers
  1. ul, ol { float:left; }
Feb 24 '07 #2

P: 24
I am only the beginner in html and I don't understand how to use the css style. Maybe you can write a code for me? Thank you.


Eglute
Feb 24 '07 #3

P: 99
[HTML]
<html>
<head><title>my first page</title></head>
<style>
ul, ol { float:left; }
</style>
<body>
<ul>
<li>apple
<li>cherry
<li>peach
<li>apricot
</ul>
<ol>
<li>tomato
<li>cucumber
<li>carrot
<li>beetroot
</ol>
</body>
</htm>
[/HTML]
I used the style tag for this but if you want to style your whole website it's best to separate the css code from the html code.
Feb 24 '07 #4

P: 99
The real one line code

[HTML]
<html>
<head><title>my first page</title></head>
<style>
/* remove browser standard behavoir */
ul,ol {margin:0;padding:0}
/* put the lists and list elements on one line */
ul, ol, li { float:left;display:block; }
/* put some space between the list items */
li {padding-left:10px;}
</style>
<body>
<ul>
<li>apple
<li>cherry
<li>peach
<li>apricot
</ul>
<ol>
<li>tomato
<li>cucumber
<li>carrot
<li>beetroot
</ol>
</body>
</htm>
[/HTML]
Feb 24 '07 #5

P: 24
Thanks. This way to solve my problem is very interesting. As for me I used table to solve the problem, but this way is longer than your. Thanks




Eglute
Feb 24 '07 #6

P: 99
Thanks. This way to solve my problem is very interesting. As for me I used table to solve the problem, but this way is longer than your. Thanks
Eglute
A tables layout is bad practice if you don't need it. Everything can be positioned with css.
Feb 24 '07 #7

Expert 100+
P: 1,892
Thanks. This way to solve my problem is very interesting. As for me I used table to solve the problem, but this way is longer than your. Thanks
Eglute
Tables should be used for data only if anything at all eg. populate a table from a database.
Feb 24 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.