html - 如何将li内的div彼此相邻对齐，宽度为百分比

Question

我正在尝试制作响应式布局。我有两个<div>里面有两个不同的li元素。我想在屏幕变化和特定尺寸的媒体查询中调整它们。我希望他们向下移动。如果我将它们的宽度设置为像素，它们将彼此相邻，但如果我将宽度设置为百分比，它们将相互重叠。我怎样才能使它们的宽度以百分比表示而不相互重叠？请参阅 jsfiddle。谢谢

#btmIconsDiv {
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;
  position: relative;
}
#btmIconsDiv ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
  float: left;
  width: 274px;
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

<div id="btmIconsDiv">
  <ul>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
  </ul>
</div>

jsFiddle https://jsfiddle.net/mohsinali/mucs2ep3/1/

Answer 1

试试这个

#btmIconsDiv ul
{
    width: 100%;
    display: inline-block;
    margin: 0px;
    margin-top: 10px;
}
#btmIconsDiv ul li{  
    width: 45%;
    display: inline-block;
    list-style-type: none;  

}

#btmIconsDiv ul li div.btmIconsUlliDiv{    
    float: left;
    width: 100%;
    /*margin-right: 50px;*/
    height: 300px;
    background-color: red;
    border: 1px solid blue;
}