Results 1 to 2 of 2

Thread: How to insert links into one row?

  1. #1
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to insert links into one row?

    Hello

    I have got list of links and I need to insert them into one row in DIV element.
    I use float:left property for them but in case of small width the links are shown in more than one rows.

    How can I do it?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is sort of odd. I'm not certain what you mean. But I think you have like not enough space inside the division. I mean, even if the division takes up the entire width of the page, in a narrow window that might not be enough. The fact that content will wrap if there is not width enough for it can be an accessibility issue, and/or a determining factor in whether or not your page has a horizontal scrollbar. Speaking of horizontal scrollbars, one solution would be to allow the division to have a horizontal scrollbar (overflow auto) if there isn't enough room for the links. But you wouldn't want to float the links then, they could still wrap. Links should be display inline anyway (their default display mode), if the height of the division is constricting, it's overflow auto and its white-space set to nowrap, it should work out, ex (the width is arbitrary, it need not be used, that way the division could expand as far as it can in the layout, only having a scrollbar if necessary):

    Code:
    <div style="height:2.336em;width:12.5em;overflow:auto;white-space:nowrap;">
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    <a href="#">Test</a> 
    </div>
    Why are you trying this? Do you have a scroller/marquee or something?

    If you want more help we would need to see the code or have a link to the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •