Question

我的main（天蓝色）元素似乎比其子元素占用的宽度更多。它的显示设置为inline-block，这让我很好奇为什么它的宽度不会自动设置为auto。直接子元素也显示inline-block，但宽度的组合=宽度小于100％。这里发生了什么？如何解决此问题并使main元素只占用所需的空间而不是整个100％的宽度？

/* ///////////////////////////////// IMPORTS /////////////////////////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');

/* ///////////////////////////////// INITIAL /////////////////////////////// */
* {
  box-sizing: border-box;
}
body {
  background-color: red;
  text-align: center;
}
main {
  display: inline-block;
  width: 90%;
  background-color: skyblue;
  text-align: left;
}
main p {
  margin: 0;
  padding: 10px;
  color: #bbb;
  font-size: 0.9rem;
}
a {
  color: #fff;
  text-decoration: none;
}
a[href="#"] {
  display: inline-block;
  width: 25%;
  margin: 2.2%;
  background-color: #f1f1f1;
  vertical-align: top;
}
img {
  max-width:100%;
}

<html>
  <body> <!-- red -->
    <main> <!-- skyblue -->
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>mmm random text caption.</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Is that a sheep or a goat?</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>A ram maybe? Is that wood tiling behind it?</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Definitly an animal on grass...on wood</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Umm. k.</p>
        </a>
    </main>
  </body>
</html>

编辑：我认为它可能是main { width: 90%; }，但这似乎迫使main占据宽度的100％。使问题变得更糟。

编辑2：我可以使用flexbox或者浮点数，但我也很好奇这是标准的inline-block行为吗？通常（根据我的经验）inline-block样式元素的宽度为auto，并根据其内容的大小进行调整。没有比他们需要的更大。

Answer 1

每当inline-block换行的内容，甚至一次，它将占用整个可用宽度。

至于期望的行为，我想你正在寻找这个：......？

＆＃13;

* {
  box-sizing: border-box;
}
body {
  background-color: red;
  text-align: center;
}
main {
  display: inline-block;
  margin: 5vw;
  background-color: skyblue;
  text-align: left;
  padding: .8rem;
  overflow: hidden;
}
main p {
  margin: 0;
  padding: 10px;
  color: #bbb;
  font-size: 0.9rem;
}
a {
  color: #fff;
  text-decoration: none;
}
a[href="#"] {
  display: inline-block;
  width: calc(33.3333% - 1.6rem);
  margin: .8rem;
  background-color: #f1f1f1;
  vertical-align: top;
  box-sizing: border-box;
  float: left;
}
img {
  max-width:100%;
}

＆＃13;

<link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet"/>
<main> <!-- skyblue -->
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>mmm random text caption.</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Is that a sheep or a goat?</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>A ram maybe? Is that wood tiling behind it?</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Definitly an animal on grass...on wood</p>
        </a>
        <a href="#">
          <div><img src="http://i.imgur.com/7WBWShL.jpg" alt=""></div>
          <p>Umm. k.</p>
        </a>
    </main>

＆＃13;

除了将保证金从rem更改为%之外，我对原始代码进行了另外一项更改，您可能想了解原因：

通常，你会认为有

display:inline-block;
width:25%;
margin: 0;
box-sizing: border-box;

对孩子们来说应该让他们换成4行，对吧？

但大多数时候 他们没有 。这就是为什么：将它们描绘成一行文字中的大字母。标记具有换行符，并且元素放在下一行，以提高可读性。浏览器将这些换行符和新行开头的标签缩减为单个space字符。 space中没有考虑CSS个字符。选项包括：

a）使用inline-block注释块来抑制html元素之间的空格：

<parent><!--
  --><child></child><!--
  --><child></child><!--
  --><child></child><!--
  --><child></child><!--
  --><child></child><!--
--></parent>

这将有效，它们将是4 /行，不添加额外的空格。还是......

b）对孩子使用float:left。如果您还希望父级扩展其高度（背景）以包含所有浮动子级，则应在其上设置overflow:hidden。这是我在上面的示例中使用的，是浮动内联容器的典型解决方案。

Answer 2

您可以使用flexbox来解决右侧额外空白的问题。

只需更改.main的风格：

main {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   width: 90%;
   background-color: skyblue;
   text-align: left;
}

JsFiddle：https://jsfiddle.net/rgbxr0sx/

Answer 3

删除main的宽度，并为您的子元素width提供固定的%。然后你就会得到你需要的东西。

您不能通过将% width同时提供给父元素和子元素来实现。

main {
  display: inline-block;
  /*width: 90%;*/
  background-color: skyblue;
  text-align: left;
}

a[href="#"] {
   width: 200px;
}

如何阻止Inline-block占用比子元素更多的宽度

3 个答案: