Horizontal List Issue

Discussion in 'HTML' started by Doug, Nov 2, 2006.

  1. Doug

    Doug Guest

    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>
     
    Doug, Nov 2, 2006
    #1
    1. Advertising

  2. Doug

    Ben C Guest

    On 2006-11-02, Doug <> wrote:
    > 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


    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.
     
    Ben C, Nov 2, 2006
    #2
    1. Advertising

  3. Doug

    Doug Guest

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

    Doug

    On Nov 2, 4:13 pm, Ben C <> wrote:
    > On 2006-11-02, Doug <> wrote:
    >
    > > 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 helpingMake 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.
     
    Doug, Nov 2, 2006
    #3
  4. Doug

    Ben C Guest

    On 2006-11-02, Ben C <> wrote:
    [snip]
    > ... 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.


    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.
     
    Ben C, Nov 2, 2006
    #4
  5. Doug

    Ed Seedhouse Guest

    On Thu, 02 Nov 2006 16:13:56 -0600, Ben C <> wrote:

    >On 2006-11-02, Doug <> wrote:
    >> 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

    >
    >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.


    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.
     
    Ed Seedhouse, Nov 3, 2006
    #5
  6. Doug

    Ben C Guest

    On 2006-11-03, Ed Seedhouse <> wrote:
    > On Thu, 02 Nov 2006 16:13:56 -0600, Ben C <> wrote:
    >
    >>On 2006-11-02, Doug <> wrote:
    >>> 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

    >>
    >>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.

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


    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.
     
    Ben C, Nov 3, 2006
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Danny Anderson
    Replies:
    4
    Views:
    465
  2. Nik Coughin
    Replies:
    2
    Views:
    603
    Jeff Thies
    Jul 28, 2004
  3. Carolyn Marenger

    horizontal menu line wrapping issue

    Carolyn Marenger, Mar 18, 2006, in forum: HTML
    Replies:
    4
    Views:
    679
    dorayme
    Mar 19, 2006
  4. keytostars
    Replies:
    4
    Views:
    501
    keytostars
    Mar 15, 2007
  5. Guest
    Replies:
    2
    Views:
    1,163
    Martin Jay
    Nov 18, 2007
Loading...

Share This Page