У меня проблема с шириной "li". У меня была похожая проблема с "div", но я решил. Я хочу положить 50% ширины в "ли" и не могу

Question

<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%;


}

Я хочу, чтобы li имел такое поведение:

JSbin

Но, таким образом, я поставил li with равно 49%.

Есть взломать? С div под div я использую font-size: 0, но с li невозможно поставить равным 0.

Answer 1

Вы можете использовать flex для решения проблемы. Вот css для того же html файла:

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

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

Answer 2

Попробуйте li {display: inline-block; ширина: 50%; float: left;}