html - 在内联 block 中隔开元素

Question

我不希望内联 block 中的图标相互接触，我希望将它们隔开。为此，我想在每个 block 周围添加一个容器，然后将图标居中放置在容器中并将容器放在 block 中。

https://jsfiddle.net/mfw3ntnm/

.foot-bar {
  position: fixed;
  bottom: 100px;
  display: inline-block;
}

.image-holder {
  width: 150px;
  height: 150px;
  align-content: center;
}

当我在没有图像持有者的情况下运行它时，它显示为一个内联 block ，但是当我添加第二个类时格式丢失了。如何在不丢失行内 block 格式的情况下让图像被容器包裹并居中？

Answer 1

这是一种思考方式。 https://jsfiddle.net/sheriffderek/1t6er3m0/

<ul class='thing-list'>
  <li class='thing'>
    thing 1
  </li>
  <li class='thing'>
    thing 2
  </li>
  <li class='thing'>
    thing 3
  </li>
</ul>

...

.thing-list {
  border: 1px solid red;
  text-align: center; /* for inline and inline-block child elements */
}

.thing-list .thing {
  border: 1px solid blue;
  display: inline-block; /* allows it to be centered by parent rule */
}

.thing-list .thing:not(:first-of-type) {
  margin-left: 1rem; /* one way to space them out */
  /* you could also use padding - or flexbox */
}

如果它们是触摸图标...我建议使用填充，以便有更大的触摸区域。我会把它添加到 fiddle 中。 :)

<ul class='icon-list'>
  <li class='icon'>
    <a href='#'>I1</a>
  </li>
  <li class='icon'>
    <a href='#'>I2</a>
  </li>
  <li class='icon'>
    <a href='#'>I3</a>
  </li>
  <li class='icon'>
    <a href='#'>I4</a>
  </li>
</ul>

...

.icon-list {
  align-items: center;
}

.icon-list .icon {
  display: inline-block;
  align-items: center;
}

.icon-list .icon a {
  display: block; /* so it has solid area to touch */
  padding: .5rem 1rem;
  border: 1px solid green;
}

.icon-list .icon a:hover {
  background: lightgreen;
}