html - 中心内联 block 列表

Question

如何将行内 block 置于 div 中？当下一行出现时，右边有一个看不见的边距，我似乎无法摆脱它。我该如何删除它？

https://gyazo.com/797bc2388bb1db8d6b474411478a57cb

我想将所有内联 block 完全居中。

.list {
  margin: 0px auto;
  height: 100%;
  width: 90%;
  background-color: gray;
}
.entry {
  display: inline-block;
  float: left;
  width: 225px;
  margin: 8px;
  box-shadow: 5px 5px 5px #888888;
}

<div class="list">

  <div class="entry">
    <button class="title btn btn-primary">Full Metal Panic!</button>
    <div class="description">Seventeen-year-old Sousuke Sagara, a sergeant working for Mithril, has been assigned to protect Kaname Chidori. He is ordered to join her high school class and be as close to her as possible to prevent her from falling into enemy hands, that is, if
      he can safely blend in with their fellow classmates without revealing his true identity.</div>
    <img src="http://cdn.myanimelist.net/images/anime/2/75259.jpg"></img>
    <button class="info info-episodes btn btn-primary">
      <div class="pull-left">EPISODES</div>24</button>
    <button class="info info-rating btn btn-warning">
      <div class="pull-left">RATING</div>R</button>
  </div>

</div>

Answer 1

对于 inline-block 元素，您可以使用 text-align:center; 将它们垂直居中

关于边距空间，当一个元素是内联的时，它会自动为段落上的空间元素(如 span 或链接)留出边距。这就是那种显示器的行为方式。

有一些变通方法可以修复该边距，例如将父级的 font-size 设置为 0 或将 -4px 设置为 margin-right 。

CSSTricks 上解释了一些解决方法，Fighting the Space Between Inline Block Elements .

虽然 display:inline-block 非常简单，但有些人会建议您使用 float 元素来完美间距。在这种情况下，如果 margin 问题不是很麻烦，那就随​​它去吧。

关于您的代码的一些事情:

• 试着把按钮列表变成...按钮列表，把它们包起来在 ul li 上(对于图像下方的按钮)，它将是语义正确且更易于样式化；
• 尽量不要在BUTTON 中使用DIV。 BUTTON 显示为内联，DIV 显示为 block ，您可以使用 SPAN 来设置一些文本 block 的样式。
• 由于描述是一段文本，您可以将其包装在 P 元素上，这在语义上会更好(SEO)

Pen