Question

我正在尝试制作一个类似于手机主页的网页。我希望它根据屏幕的大小重新排序图标。到目前为止我所拥有的是吼叫

＆＃13;

ul {
  list-style: none;
  padding: 0;
}
li {
  display: inline-block;
  width: 5em;
  height: 5em;
  padding: 1em;
  margin: 1em;
  background-color: rgba(20, 20, 20, 0.7);
  border-radius: 1em;
}
img {
  width: 100%;
  height: 100%;
}

＆＃13;

<ul>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
</ul>

＆＃13;

此代码的问题在于，当您调整窗口大小并且列表项移动到下一行时，您可能会在右侧留下很大的间隙。有没有办法可以通过将列表整体居中或列在列表项之间来分配这个额外的空间？我想避免使图标居中，这样我就可以保持它们在水平和垂直方向上对齐。

Answer 1

我从inline-block更改为float:left，我将padding移至img

＆＃13;

ul {
  list-style: none;
  padding: 0;
  animation: FadeIn 1.3s;
  width: 100%;
}
li {
  float: left;
  background-color: rgba(20, 20, 20, 0.7);
  border-radius: 1em;
  width: 13.42%;
}
ul li:not(:first-child){
  margin-left: 1%;
}
img {
  width: 82%;
  padding: 8%;
}

＆＃13;

<ul>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
</ul>

＆＃13;

Answer 2

我刚刚复制了您的代码并添加了媒体查询。我希望这会有所帮助。

CSS已添加：

@media only screen and (max-width: 768px) { 
  ul {
    padding: 10%;
  }
}

ul {
  list-style: none;
  padding: 0;
  animation: FadeIn 1.3s;
}
li {
  display: inline-block;
  width: 5em;
  height: 5em;
  padding: 1em;
  margin: 1em;
  background-color: rgba(20, 20, 20, 0.7);
  border-radius: 1em;
}
img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) { 
  ul {
    padding: 10%;
    margin-top: 0;
  }
}

<ul>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
  <li>
    <a href="http://www.google.com">
      <img class=link src="https://www.google.com.au/images/branding/googleg/1x/googleg_standard_color_128dp.png">
    </a>
  </li>
</ul>

删除列表右侧的间隙

2 个答案: