0

I am trying to create a <ul> list with a specific width of 50%, it should show side by side, but for some reason if I have more text (more than 1 line), it puts margin at the top of second LI. Please take a look at the following screenshot..

enter image description here

Below is my current code..

        .checklist {
          list-style-type: none;
          display:block !important;
          margin:0;
          padding:0;
        }
        .checklist li {
            margin-bottom:4px;
            width: 40%;
            margin-top:0 !important;
            display:inline-block;
            padding:0;
            margin:0;
        }
        .checklist .icon-holder {
            margin-top:1px;
            background:#444;
            font-size:11px;
            line-height:11px;
            color:#fff;
            width:65px;
            height:50px;
            text-align:center;
            vertical-align:middle;
            float:left;
            display: table;
        }
        .icon-holder i {
            display: table-cell;
            vertical-align:middle;
        }
        .item-content {
            margin-top:0 !important;;
            margin-left:80px;
        }
        .item-content h3 {
            margin:0;
        }

here is the jsFiddle: https://jsfiddle.net/92458m8v/

j08691
  • 204,283
  • 31
  • 260
  • 272
user1718343
  • 725
  • 2
  • 9
  • 18

2 Answers2

1

The default vertical alignment of inline elements is baseline (which is what you're seeing). Change it by adding vertical-align:top to your list item rules:

.checklist li {
    margin-bottom:4px;
    width: 40%;
    margin-top:0 !important;
    display:inline-block;
    padding:0;
    margin:0;
    vertical-align:top;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
0

You can set vertical-align to <li> to adjust the inline positions

CSS

.checklist li {
   margin-bottom:4px;
   width: 40%;
   margin-top:0 !important;
   display:inline-block;
   padding:0;
   margin:0;
   vertical-align: top;
}

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36