html - CSS - 元素不在 div 内保持内联

Question

我试图让 2 个元素在一个 div 中显示内联 block ，但我尝试过的都没有用。

我用过的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 布局工作原理的理解有很多错误。

1. 您告诉您的列表项是display: inline-block。这告诉他们和他们的内容一样宽。
2. 您告诉列表项的内容 - img 和段落 - 的宽度基于 % - 指的是父元素宽度的 % - 这恰好是列表项。

所以基本上列表项会询问其内容“我需要多宽？” - 当内容询问父列表项“你有多宽？我会是那个的 xy %。”

很容易看出每个元素需要一个答案才能给出一个答案，从而形成一个无限循环的未回答问题。

除此之外，只要两个或多个总宽度为 100% 的内联 block 元素之间有任何空格(甚至只是一个换行符)，就会(至少)使最后一个元素换行。

如何解决 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>