html - 内联块中的元素间隔开

我不想一个内联块中的图标被触摸，我想把它们隔开。为此，我想在每个块周围添加一个容器，然后将容器中的图标居中，并将容器放在块中。
https://jsfiddle.net/mfw3ntnm/

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

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

当我在没有图像保持器的情况下运行它时，它显示为内联块，但是当我添加第二个类时，格式将丢失。如何在不丢失内联块格式的情况下，将图像包装到容器中并居中？

最佳答案

这是一种思考的方法。
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 */
}

如果它们是触摸图标。。。我建议使用填充物，这样触摸区域会更大。我把它加到小提琴上。: )

<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;
}

关于html - 内联块中的元素间隔开，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43668502/