Horizontal List Issue

D

Doug

Hi all,
I would like to display the list horizontally. I've learned that the li
style need to be inline.
I have the code as follow but it doesn't work.
Thank you for helping

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<ul>
<li style="display:inline;">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
<li style="display:inline">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
<li style="display:inline">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
</ul>
</body>
</html>
 
B

Ben C

Hi all,
I would like to display the list horizontally. I've learned that the li
style need to be inline.
I have the code as follow but it doesn't work.
Thank you for helping
Click to expand...

Make li float: left and display: block.

You can also make it float: left and display: inline, the effect is the
same. But I think display: block makes more sense. Or just leave it as
the default (display: list-item) and set list-style-type to none.

The reason why what you have isn't working is that your <li>s contain
block level elements. Apart from inline-blocks (which are another
story), inline boxes can't really contain block boxes.

I'm talking about boxes here, in the sense of the CSS box model, not to
be confused with inline vs block _elements_, concerning which the HTML
DTD defines validity requirements. It is perfectly valid CSS to have
display: block elements inside display: inline elements, but the
specification defines that anonymous block boxes are created effectively
in order to keep the inline boxes as leaves in the tree of boxes. You
can read about anonymous block boxes in section 9.2.1.1 of CSS 2.1.
 
D

Doug

Superb man, really really helpful!!!
Yep I got it into working now.
Thanks lunch on me :)

Doug
 
B

Ben C

On 2006-11-02 said:
... specification defines that anonymous block boxes are created
effectively in order to keep the inline boxes as leaves in the tree of
boxes. You can read about anonymous block boxes in section 9.2.1.1 of
CSS 2.1.
Click to expand...

I was a bit imprecise, well, wrong there. Inline boxes can be nested in
other inline boxes (it's boxes for #text nodes that are leaves).
Anonymous block boxes prevent inline boxes ever being ancestors of block
boxes in the tree of generated boxes.
 
E

Ed Seedhouse

Make li float: left and display: block.
Click to expand...
You can also make it float: left and display: inline, the effect is the
same. But I think display: block makes more sense.
Click to expand...

The CSS standard requires that any floated element is given
display:block; no matter what your CSS says. All browsers I know of
obey this. Some bugs in IE are fixed with a display:inline; declaration
but IE will still render the element as a block, not inline.
 
B

Ben C

The CSS standard requires that any floated element is given
display:block; no matter what your CSS says.
Click to expand...

Not exactly, if it's display: list-item, it stays as display: list-item.

But if it's display: inline, that's commuted to display: block.

That's why I think display: block is more logical to use with a floated
list-item. Setting either has the effect of getting rid of the bullets.
The clearest solution is to leave it display: list-item and set
list-style-type: none. But that may not work in IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Only one table shows up with the information 2
Script to send email not working 1
Sort by number of characters 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Horizontal menu bar header 2
Filter table rows based on multiple checkboxes value 2

Members online

No members online now.
Total: 24 (members: 2, guests: 22)
Robots: 196

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top