Question

我尝试使用不同的things，但似乎无法摆脱2个内联块之间的空白区域，因此list不在inline-block-div旁边：< / p>

＆＃13;

.parent {
  border: 10px solid red;
}

.list {
  border: 5px solid green;
  margin-top: 0;
  display: inline-block;
  width: 25%;
}

.inline-block-div {
  border: 5px solid blue;
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

＆＃13;

<div class="parent">
  <div class="list">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>
  <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>

</div>

＆＃13;

Answer 1

空间实际上来自HTML。默认情况下，空格将添加到内嵌块元素中。我希望你知道要打空间。您的 CSS 中的另一个问题是忘记添加 box-sizing：border-box 属性。

如果没有此属性，则宽度计算如下

宽度：75％+ border-left-width + border-right-width。所以最终你的宽度是 75％+ 10px的。如果提到任何填充，您的宽度将被添加更多。请尝试使用此代码

div{
  box-sizing:border-box;
}
.parent {
  border: 10px solid red;
  width:100%
}

.list {
  border: 5px solid green;
  margin-top: 0;
  display: inline-block;
  width: 25%;
}

.inline-block-div {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  margin-left:-4px;
  border:5px solid blue
}

<div class="parent">
  <div class="list">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>
  <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>

</div>

Answer 2

我建议使用flex。 Flex非常适合开发。

.parent {
  border: 10px solid red;
  display: flex;
}

.list {
  border: 5px solid green;
  margin-top: 0;
  display: inline-block;
  width: 25%;
}

.inline-block-div {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

<div class="parent">
  <div class="list">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>
  <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>

</div>

Answer 3

您可以将父级设为弹性框以使其固定

＆＃13;

.parent {
  border: 10px solid red;
  display: flex;
}

.list {
  border: 5px solid green;
  margin-top: 0;
  display: inline-block;
  width: 25%;
}

.inline-block-div {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

＆＃13;

<div class="parent">
  <div class="list">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>
  <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>

＆＃13;

CSS内联块空白区域

3 个答案: