Question

我想将内容均匀地隔开，然后让所有空间都相等，但是我不确定该怎么做。当我在列表中添加填充或增加列中的空间时，就会弄乱页面的格式

我也尝试将偏移量放在行中，但仍然无法解决问题所以我正在尝试使其像：

      Projects          About Me          Contact Me
      Pic               Pic               Pic

但是任何时候我将其更改为：

      Projects Pic         About Me          Contact Me
                           Pic               Pic

.header {
  font-family: Cambria;
  font-size: xx-large;
  text-align: center;
  padding: 50px;
  background-color: lightblue;
  background-image: linear-gradient(to bottom right, darkgray, lightblue);
}

.home {
  width: 100%;
}

.home div {
  width: 200px;
}

.home img {
  vertical-align: middle;
  border-style: none;
  height: 200px;
  width: 200px;
  object-fit: cover;
}

.home ul {
  display: inline-block;
  list-style-type: none;
  overflow: hidden;
}

.home li {
  margin-left: 20px;
  list-style: none;
  float: left;
}

.home a {
  text-decoration: none;
  font-family: Cambria;
  font-weight: lighter;
  color: steelblue;
}

.home a:hover {
  font-weight: bold;
  color: darkblue;
}

.home img:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<body style="background-color:mintcream">
  <div class="header">
    <span style="color:darkblue">const</span>
    <span style="color:white">_name =</span>
    <span style="color:darkblue">"My_Name"</span>
  </div>
  <div class="row">
    <ul class="home" style="padding-top:20px;">
      <li class="col-md-3">
        <a href="#">
          <span style="font-size:35px">Projects</span>
          <span><img src="https://via.placeholder.com/300.png/09f/fff"/
          </span>
        </a>
      </li>
      <li class="col-md-3">
        <a href="#">
          <span style="font-size:35px">About Me</span>
          <div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
        </a>
      </li>
      <li class="col-md-2">
        <a href="#">
          <span style="font-size:35px">Contact Me</span>
          <div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
        </a>
      </li>
    </ul>
  </div>
</body>

Answer 1

您使用过网格系统吗？这将使一切变得更容易执行，并使您的网页具有更高的响应速度。在此处查看我的一些示例代码：https://github.com/apanesar11/CSS-Grids

Answer 2

正如@ apanesar11指出的那样，网格应该可以解决您的问题。另一个解决方案是使用flexbox。我用@mplungjan给出的片段制作了您和一个示例： https://codepen.io/mdubus/pen/BvXXmJ

.home {
  width: 100%;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}

如果您对对齐不满意，也可以用justify-content:space-around;替换.home中的justify-content:space-between;。我不确定您想要哪种对齐方式，但希望能对您有所帮助！：）

编辑：我还用

更改了.home a

display:flex; flex-direction:column;，以便您的图片位于文字下方。

Answer 3

当前具有此行为的原因是因为span是一个 inline 元素，而div是一个 block 元素。因此，about.png和phone.jpg图像当前处于定位状态，因为它们被包装在div元素中，因此开始新的图像。您的project.jpg img包装在span元素中，并且span元素不会在新行上开始，它们仅占用所需的空间。

如何分隔<ul>的内容？

3 个答案: