Question

我试图在div中显示2个项目以显示内联块，但我尝试过的任何内容都无法正常工作。

我使用的HTML是

 <div class="quotation">
     <ul>  
      <li><img src="images/quotes.png" alt="" class="quotemarks"></li>
      <li><p class="words">All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
    </ul>
   </div>

虽然我的CSS目前如下：

.quotation {
  position: absolute;
  margin: 20% 5% 10% 5%;
  width: 88.2%;
  max-height: 100px;
  padding: 0.5%;
  background-color: red;
  color: #bdc3c7; 
}

.quotation ul li {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: 'PT Sans', sans-serif;
  font-weight: 100;
}

.quotemarks {
  max-width: 20%;
}

.words {
  width: 60%;
}

我无法理解为什么.quotemarks和.words不会a）保持在内.quotation和b）不会内联呈现。

Answer 1

您的代码中存在一些错误，并且了解css布局的工作原理。

您告诉列表项为display: inline-block。这告诉他们和他们的内容一样宽。
您告诉列表项的内容 - img和段落 - 其宽度基于％ - ，它指的是父元素宽度的百分比 - 恰好是列表项目。

所以基本上列表项会询问其内容“我需要多宽一点？” - 当内容询问父列表项目“你有多宽？我将是xy％。”

很容易看出每个元素需要一个答案才能提供一个，从而创建一个无限问题的无限循环。

除此之外，只要两个或多个内联块元素之间有任何空格（即使只是换行符），其总和宽度为100％将使（至少）最后一个元素换行到新行。

如何解决inline-block空白问题：要么制作列表项float: left;（它有自己的陷阱！），要么在父元素上设置font-size: 0;（在这种情况下， ul），并根据需要将其重新设置为儿童。

另外，将宽度控制类放在列表项上。

.quotation {
  position: absolute;
  margin: 20% 5% 10% 5%;
  width: 88.2%;
  max-height: 100px;
  padding: 0.5%;
  background-color: red;
  color: #bdc3c7;
}
.quotation ul {
  /*set this to avoid linebreak due to whitespace */
  font-size: 0;
}
.quotation ul li {
  display: inline-block;
  text-decoration: none;
  font-family: 'PT Sans', sans-serif;
  /* re-set font-size here to what you need */
  font-size: 14px;
  font-weight: 100;
  vertical-align: text-top;
}
.quotemarks {
  max-width: 20%;
}
.words {
  width: 60%;
}
.quotemarks img {
  max-width: 100%;
}

<div class="quotation">
  <ul>
    <li class="quotemarks">
      <img src="http://placekitten.com/g/200/300" alt="" />
    </li>
    <li class="words">
      <p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p>
    </li>
  </ul>
</div>

Answer 2

将您的班级.quotemark和单词移至父元素

<div class="quotation">
    <ul>  
        <li class="quotemarks"><img src="images/quotes.png" alt=""></li>
        <li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day; though doubtless the original Samuel must long ago have slipped his cable for the great South Sea of the other world.</p></li>
    </ul>
</div>

确保您在列表项中添加了必要的垂直对齐规则（顶部，中间或底部...）。

查看demo

我希望这会有所帮助。

Answer 3

谢谢大家，你的解决方案很有效，虽然我的CSS仍然像罪一样丑陋，但所有东西都装在盒子里，我也能够改变引号的大小。

<div class="quotation">
        <ul>  
          <li class="quotemarks"><img src="images/quotes.png" alt=""></li>
          <li class="words"><p>All honour to the Enderbies, therefore, whose house, I think, exists to the present day</p></li>
       </div>

和CSS

.quotation {
  position: absolute;
  margin: 20% 5% 200px 5%;
  width: 88.2%;
  max-height: 100px;
  padding: 0.5%;
  background-color: #f5f5f5;
  color: #bdc3c7; 
}

.quotation ul li {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: 'PT Sans', sans-serif;
  font-weight: 100;
  vertical-align: middle;
}

.quotemarks {
  max-width: 20%;
  margin: 0 10px 0 0;
}

 .quotemarks img {
    height: 40px;
  }

.words {
  width: 80%;
  line-height: 15px;
  font-size: 20px;
}

CSS - 不在div中保持内联的项目

3 个答案: