1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Horizontal Align List Items - Display VS Float

Discussion in 'HTML & Website Design' started by Neodism, Aug 5, 2014.

  1. #1
    I've had a basic understanding of CSS for about two year now. I haven't dug very deep into it, but I plan to very soon. In the process of "freshening up" I created a simple one page layout using HTML and CSS. It's not an actual design, just the layout. I was simply testing myself to make sure I could still do it.

    Something I stumbled across was that if you have a unordered list that you want to display horizontally across the screen you would usually use display: inline, but float: left/right works the same way. It will cause your list to display horizontally.

    So, is there any problem with using float instead of display for your lists? Is there any real difference in what happens when you use one or the other? From what I can see in toying with them, there is not.
     
    Neodism, Aug 5, 2014 IP
  2. hdewantara

    hdewantara Active Member

    Messages:
    303
    Likes Received:
    11
    Best Answers:
    9
    Trophy Points:
    68
    #2
    List items may be displayed as blocks (display:block) or text-like items (display:inline). I always think of the latter simply as texts, which will automatically have some spacings in-between. And by default, texts will also be aligned vertically to the baseline (you know text, this is not exactly the bottom).

    Blocks, on the other hand don't have spacings by default. To be like texts, you may try to float blocks and they will rearrange themself to the left / right instead of stacking-up. Unlike texts however, floating will make you will lose control on their vertical-alignment.
     
    hdewantara, Aug 6, 2014 IP
  3. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    721
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    115
    #3
    From here: http://stackoverflow.com/questions/...e-vs-displayinline-block-vs-displaytable-cell

    I personally prefer to use display: inline-block for list items and float for layout columns etc.
     
    HuggyStudios, Aug 7, 2014 IP