Question

我目前正在为我的网站制作footer，并遇到了一个非常意外的结果。所以，我有footer个四个不同的菜单，作为footer的孩子。每个菜单都设置为width: 25%;和display: inline-block;，它应该完全适合，不应该100％除以4是25％？但是，最后一个菜单突破了footer。

这是我得到的example。

正如您在示例中所看到的，日记菜单正在突破网格，但每个菜单都设置为width: 25%;和display: inline-block;。

这里可能出现什么问题，如何在不修改每个菜单width的情况下解决问题？

如果这还不够，我很乐意提供任何澄清我的问题。

以下是相关代码。

HTML

<footer class="footer">
    <div class="container">
        <div class="menu-wrapper">
            <div class="menu">
                <ul>
                    <h6 class="peasant">Explore</h6>
                    <li><a href="#">Our Philosophy</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Services</h6>
                    <li><a href="#">Offers</a></li>
                    <li><a href="#">Work</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Contact</h6>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Journal</h6>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

CSS

footer.footer {
    height: 500px;
    width: 100%;
    background-color: #f8f8f8;
}
.menu {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}
.footer .menu ul {
    padding: 0;
}

对此处发生的事情的任何澄清也将受到赞赏！

Answer 1

内联块元素需要一些额外的空间（如4px）。摆脱这个错误你有2个选择。在您的案例margin-right: -0.25em

中为内联块元素添加.menu

或

您可以在父级重置font-size和line-height。在这种情况下，

.menu-wrapper {
    font-size:0;
    line-height: 0;
}

并使用子项中的实际font-size和line-height

.menu {
    font-size: "your font size";
    line-height: "your line height";
}

这将起作用

Answer 2

因为它们之间有空格。
保持inline-block的唯一非破解方法是删除标记中的空格其他方法是使用flex或float 其他所有东西（如边距或字体大小）都是黑客。

body {
  font-size: 2em;
}

section {
  margin: .5em 0;
}

div {
  display: inline-block;
  width: 25%;
  background: silver;
}

div:nth-child(even) {
  background: antiquewhite;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<section>
  <div>
    1
  </div><div>
    2
  </div><div>
    3
  </div><div>
    4
  </div>
</section>

<section>
   <div>1</div><!--
--><div>2</div><!--
--><div>3</div><!--
--><div>4</div>
</section>

Answer 3

不需要写那么多CSS只使用三行，这是你的解决方案。

＆＃13;

.menu-wrapper {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

＆＃13;

<footer class="footer">
  <div class="container">
      <div class="menu-wrapper">
          <div class="menu">
              <ul>
                  <h6 class="peasant">Explore</h6>
                  <li><a href="#">Our Philosophy</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Services</h6>
                  <li><a href="#">Offers</a></li>
                  <li><a href="#">Work</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Contact</h6>
                  <li><a href="#">Contact Us</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Journal</h6>
                  <li><a href="#">Blog</a></li>
              </ul>
          </div>
      </div>
  </div>
</footer>

＆＃13;

Answer 4

只需将display: inline-flex;和justify-content: space-between;应用于.menu-wrapper即可。

应该这样做。

Answer 5

由于菜单之间有标签字符，因此内容会突破网格：

这些被HTML视为空格，并添加到整体宽度。

解决此问题的一些方法是：

最小化HTML：https://jsfiddle.net/9cmLaqhp/1/
将float:left;添加到.menu

Answer 6

简单的解决方案可能是这个。看看，如果你想看到这里的演示是codepen

.footer {
    height: auto;
    width: 100%;
    background-color: #f8f8f8;
    position:relative;
    display:block;
    border:1px solid blue;
}
.menu-wrapper {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}
.menu {
    width: 25%;
    display: block;
    border: 1px solid red;
    float: left;
    margin: 0 15px;
    min-height: 1px;
    position: relative;
    height: 150px;
}
.footer .menu ul {
    padding: 0;
    margin: 0;
}
.footer .menu ul  li {
    list-style: none;
}

为什么父母内部没有四个孩子？

6 个答案: