我不希望内联 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 格式?
最佳答案
这是一种思考方式。 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;
}
关于html - 在内联 block 中间隔元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43668502/