Question

我正在用4个不同的列（divs）做页脚。那四个divs全部放在一个容器中。我将这些div的宽度设置为25％，因此它们都应位于同一“行”中，但事实并非如此。我向每个background-color添加了一个不同的divs来查看多余的空间来自何处，并且我发现divs之间存在一个既不是边距也不是填充的空间。我在Stackoverflow上进行了查找，以为找到了解决方案，但是将父元素的font-size设置为0，然后将子元素的font-size重置为无效...

footer {
background-color: #000;
color: #BFBFBF;
padding: 60px;
}

.footer-container {
    width: 85%;
    background-color: red;
}

.footer-col {
    display: inline-block;
    width: 25%;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>

    <div class="footer-container">

        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

    </div>

</footer>

Answer 1

删除所有空格：

footer {
  background-color: #000;
  color: #BFBFBF;
  padding: 60px;
}

.footer-container {
  width: 85%;
  background-color: red;
}

.footer-col {
  display: inline-block;
  width: 25%;
}

.fc-1 {
  background-color: orange;
}

.fc-2 {
  background-color: green;
}

.fc-3 {
  background-color: blue;
}

.fc-4 {
  background-color: yellow;
}

footer a {
  color: #BFBFBF;
  transition: none;
  display: block;
}

footer a:hover {
  color: #BFBFBF;
}

<footer>
  <div class="footer-container">
    <div class="footer-col fc-1">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-2">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-3">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div><div class="footer-col fc-4">
      <a href="#">Ledmanipulation</a>
      <a href="#">Kinesiotape</a>
      <a href="#">Akut skadesbehandling</a>
      <a href="#">Triggerpunktsbehandling</a>
    </div>
  </div>
</footer>

Answer 2

Flexbox is a useful technique to position elements这样，所以我建议您在容器上使用display: flex;来解决此问题，也可以删除容器中所有will prevent the spacing from appearing的空白：

.footer-container {
    display: flex;
    width: 85%;
    background-color: red;
}

.footer-col {
    display: inline-block;
    width: 25%;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
    word-wrap: break-word;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>
    <div class="footer-container">
        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>
    </div>
</footer>

Answer 3

使用flex-box，您将能够使用flex-basis: 25%; flex-grow: 0;而非width: 25%;来解决此问题

footer {
background-color: #000;
color: #BFBFBF;
padding: 60px;
}

.footer-container {
    width: 85%;
    display: flex;
    background-color: red;
}

.footer-col {
    display: inline-block;
    flex-basis: 25%;
flex-grow: 0;
}

.fc-1 {
    background-color: orange;
}

.fc-2 {
    background-color: green;
}

.fc-3 {
    background-color: blue;
}

.fc-4 {
    background-color: yellow;
}

footer a {
    color: #BFBFBF;
    transition: none;
    display: block;
}

footer a:hover {
    color: #BFBFBF;
}

<footer>

    <div class="footer-container">

        <div class="footer-col fc-1">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-2">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-3">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

        <div class="footer-col fc-4">
            <a href="#">Ledmanipulation</a>
            <a href="#">Kinesiotape</a>
            <a href="#">Akut skadesbehandling</a>
            <a href="#">Triggerpunktsbehandling</a>
        </div>

    </div>

</footer>

我不知道为什么我的div之间有间距

3 个答案: