CODEWITHSUNDEEP
htmlcss
pandabuddy
pandabuddy

Reputation: 1

I have a problem with "li" width. I had a similar problem with "div" with, but i solved. I want to putt 50% width in "li" and cnn't

<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 4</li>
  <li>test 5</li>
  <li>test 6</li>
</ul>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;

}

ul{
  width:100%;
}

li{
  display:inline-block;
  width:50%;


}

I want that li has this behavior:

JSbin

But this way, i have that put li with equal 49%.

Have some hack? With div under div i use font-size: 0 but, with li not is possible put equal 0.

Upvotes: 0

Views: 41

Answers (2)

Biplove Lamichhane
Biplove Lamichhane

Reputation: 4095

You can use flex to solve the problem. Here is css for same html file:

 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  ul{
    width:100%;
    display: flex;
    flex-wrap: wrap;
  }

  li{
    display:inline-block;
    width:50%;
  }

Upvotes: 0

jord kuijer
jord kuijer

Reputation: 101

Try li{display: inline-block; width: 50%; float: left;}

Upvotes: 1

Related Questions