Question

大家好我想尝试使用弹性框将我的图像放在屏幕中间，然后在每个之间添加一些填充。但是由于某种原因，第一张图像与第二张图像重叠，我正在尝试对其进行排序：

正如你在这里看到的那样，我可以使用完美的fa图标：Link here

HTML：

    <div class="row">
        <div class="col-md-12">
            <div class="sidebar-social">
                <ul>
                    <li>
                    <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="Images/phone1.png">
                    <span id="header1span">Reklambyrå</span>
                    </a>    
                    </li>
                    <li>
                        <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="Images/phone.png">
                        <span id="header1span">Reklambyrå</span>
                        </a>    
                    </li>
                </ul>
            </div>
        </div>
    </div>

CSS：

.services .get_in {
    margin: 0;
}

.sidebar-social {
    margin: 0;
    padding: 0;
}

.sidebar-social ul {
    margin: 0;
    padding: 5px;
        display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-social li {
      text-align: center;
    width: 15.9%;
    margin-bottom: 3px!important;
    background-color: #fff;
    display: inline-block;
    font-size: 10px;
    padding:0;
        display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
    width: 32px;
    height: 32px;
    margin: 10px auto 0;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
  color: #383533;
  margin-top:0;
  padding-top:5px;
}
.sidebar-social a{
  text-decoration:none;
  width:100%;
  height:100%;
  display:block;
  margin:0;
  padding:0;
}

.sidebar-social a span{
  color:black;
  font-size:10px;
  padding:5px 0 10px 0;
  display:block;
  text-transform:uppercase;
  font-family:'Josefin Sans';
  letter-spacing:1px;
}

.sidebar-social a:hover i.fa-paint-brush { color: #FFC600; }
.sidebar-social a:hover i.fa-phone { color:#FFC600 }

然而现在我希望它能够与实际图片一起工作，我想要相同的布局，但是使用我的图片而不是图标，但是当我这样做时，它完全重叠，所以我只是如何才能到达那里在每个div之间填充，这样我就可以插入照片而不是图标

谢谢

Answer 1

查看此代码，我将宽度100％添加到锚标记..你的宽度为16.some％，你的图像比容器宽度宽，那就是你重叠了。

＆＃13;

.services .get_in {
    margin: 0;
}

.sidebar-social {
    margin: 0;
    padding: 0;
}

.sidebar-social ul {
    margin: 0;
    padding: 5px;
        display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-social li {
      text-align: center;
     width: 100%;
    margin-bottom: 3px!important;
    background-color: #fff;
    display: inline-block;
    font-size: 10px;
    padding:0;
        display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    //background-image: url('//www.fillmurray.com/500/1200');
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
    width: 32px;
    height: 32px;
    margin: 10px auto 0;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
  color: #383533;
  margin-top:0;
  padding-top:5px;
}
.sidebar-social a{
  text-decoration:none;
  width:100%;
  height:100%;
  display:block;
  margin:0;
  padding:0;
}

.sidebar-social a span{
  color:black;
  font-size:10px;
  padding:5px 0 10px 0;
  display:block;
  text-transform:uppercase;
  font-family:'Josefin Sans';
  letter-spacing:1px;
}

.sidebar-social a:hover i.fa-paint-brush { color: #FFC600; }
.sidebar-social a:hover i.fa-phone { color:#FFC600 }

＆＃13;

  <div class="row">
        <div class="col-md-12">
            <div class="sidebar-social">
                <ul>
                    <li>
                    <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="//www.fillmurray.com/200/300">
                    <span id="header1span">Reklambyrå</span>
                    </a>    
                    </li>
                    <li>
                        <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="//www.fillmurray.com/200/300">
                        <span id="header1span">Reklambyrå</span>
                        </a>    
                    </li>
                </ul>
            </div>
        </div>
    </div>

＆＃13;

在两个图像之间创建空间

1 个答案: