如何使用浮动列表项制作响应式布局？答案

【问题标题】：How to make responsive layout with floated list-items?如何使用浮动列表项制作响应式布局？
【发布时间】：2019-09-12 02:27:50
【问题描述】：

我正在制作一个带有浮动<li> 的响应式列表，我希望该列表保留三列。但是，在调整窗口大小时，浮动项目（与固定项目一样）被推送到两列中，而不是调整大小。这是我的代码示例：

#list {
  position: relative;
  width: 100%;
  display: block;
}

#list li {
  position: relative;
  width: 27%;
  float: left;
  margin: 2% 2% 0 0;
  display: block;
}

<ul id="list">
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
  <li>item1</li>
<ul>

【问题讨论】：

我真的不明白您的代码会如何将其推倒。 (27+2)*3=87。它不超过 100。jsfiddle.net/RAjML
啊，我明白了，我有一个 2% 的填充把事情搞砸了；）干杯

标签： css list width css-position

【解决方案1】：

N 列布局中的 % 和maring/padding 问题是像素舍入。

如果您定义 2%+2%+2% 的填充，如果不进行四舍五入，它可能是 20.4px+20.4px+20.4px=61.2px。但是通过四舍五入，它会给出20px+20px+20px=60px。

此外，不同的浏览器可能会以不同的方式舍入像素。假设 2% 等于 20.7px。一些浏览器可能会将其四舍五入为 20 像素，其他浏览器可能会四舍五入为 21 像素。

如果您需要结合 % 和一些边距/填充，可以使用 inner element。是迄今为止我发现的最好的跨浏览器解决方案：

HTML：

   <ul id="list">
       <li><span>item1</span></li>
       <li><span>item1</span></li>
       <li><span>item1</span></li>
       <li><span>item1</span></li>
    <ul>

css:

#list{
    position: relative;
    width: 100%;
    display: block;
}

#list li {
    width: 33.3%; /* nice 3 columns */
    float: left;
    padding: 0; /* should have zero paddng/margin */
    margin: 0;
}

#list li > span {
 margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
 display: block;
}

此外，您可以为较小的屏幕尺寸指定两列：

@media only screen and (max-width: 800px) {
   #list li {
        width: 49.9%;
   }
}

【讨论】：

谢谢解答，我试试看！