Question

我不希望内联块中的图标被触摸，我想将它们分开。为此，我想在每个块周围添加一个容器，然后将图标放在容器中心，并将容器放在块中。

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

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

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

Answer 1

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

def check_add(d):
    if "add" in d:
        return True

    for k in d:
        if isinstance(d[k], dict):
            if check_add(d[k]):
                return True

    return False

df[df["json"].apply(check_add)]

#  id   letter  json
#0  1       a   {'add': 2}
#2  3       c   {'add': {'sub': 4}}

...

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

Answer 2

您只需在第二个图像容器上放置边距（边距 - 左侧和右侧）。见下面的示例

＆＃13;

.foot-bar {
  position: fixed;
  bottom: 100px;
}
.image-holder {
  text-align: center;
  display: inline-block;
}
.image-holder:nth-child(2) {
  margin: 0 10px;
}
/**if more than 3 images
.image-holder:nth-child(even) {
  margin: 0 10px;
}
**/

＆＃13;

<div class="foot-bar">
  <div class="image-holder">
    <a href="about.html">
      <img src="images/profile.png" width="100" height="100" />
    </a>
  </div>
  <div class="image-holder">
    <a href="projects.html">
      <img src="images/projects.png" width="100" height="100" />
    </a>
  </div>
  <div class="image-holder">
    <a href="blogs.html">
      <img src="images/blogs.png" width="100" height="100" />
    </a>
  </div>
</div>

＆＃13;

空间输出内联块中的元素

2 个答案: