CODEWITHSUNDEEP
htmlcss
FlyingCat
FlyingCat

Reputation: 14288

How to align the ul list in my case?

I am trying to build an unordered list for my app.

i have something like

html

<div id='wrapper' class='container'>
      <ul>
          <li id='first-btn'></li>
          <li id='second-btn'><a href='#'>test</a></li>
          <li id='third-btn'><a href='#'>test 3</a></li>
      </ul>        
  </div>

css

#wrapper li{
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
}

#first-btn{
    background-color: #5A8D17;
}

#second-btn{
    background-color: #80CD1D;
}

#third-btn{
    background-color: #FFEE00;
}

However, my end result is so weird.

  1. My second and third button are shifted down.
  2. I also don't want any gap between li so every button should be close next to each other
    instead of seeing 2px of margin.

http://jsfiddle.net/Mcq6u/

Can anyone help me about this? Thanks a lot

Upvotes: 1

Views: 57

Answers (3)

George
George

Reputation: 36794

1) You're list items are weirdly aligned because they are vertically-aligned baseline by default. The baseline of the text on the right two items are vertically aligned with the baseline of the first (the bottom).

2) The '2px margin' that you see between each is simply a space. Because the list items are displayed inline-block, they recognize the white-space.

Change the vertical-align and remove/comment the white-space and you have it:

HTML

<div id='wrapper' class='container'>
    <ul>
        <li id='first-btn'></li><!--
        --><li id='second-btn'><a href='#'>test</a></li><!--
        --><li id='third-btn'><a href='#'>test 3</a></li>
    </ul>        
</div>

CSS

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    vertical-align:top;
}

JSFiddle

Upvotes: 4

Alex Char
Alex Char

Reputation: 33238

You have to change: 

#wrapper li {
    display: inline-block;
    width: 50px;
    height: 70px;
    padding: 0;
    float: left;
    }

Also if you need space between them add in the same class:

margin: 5px;

and adjust pixels according your needs:)

fiddle

Upvotes: 2

bingjie2680
bingjie2680

Reputation: 7773

Just change 

 display: inline-block;

to:

 float:left;

here is the result: http://jsfiddle.net/Mcq6u/2/

Upvotes: 2

Related Questions