Question

我用图像做一些块，我想将它们彼此排成一行，并在它们之间留一些空间。我希望这是水平且内部空间更少。我想删除块之间的空间。

 /* remove spacing between middle columns */
  .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
  }
  /* remove right padding from first column */
  .row.no-gutter [class*='col-']:first-child {
    padding-right:0;
  }
  /* remove left padding from first column */
  .row.no-gutter [class*='col-']:last-child {
    padding-left:0;
  }


  /* only for column content visible */
  .col-md-1>div {background-color:#ddd;}

<div class="container-fluid">
    <div class="row no-gutter" >
        <div class="col-md-6"   style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">i expect this to be horizontal and less inner space.placing it above head in wordpress theme just after head
    </div>
  <div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2940" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2947" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2946" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2945" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2944" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2942" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
    </div>
  </div>

Answer 1

我不确定我是否理解您的问题，但是也许您只需要将带有Facebook徽标的div包装在另一个div中，然后添加一个display:flex;

检查此示例，让我知道它是否回答了您的问题:)

https://codepen.io/mdubus/pen/NeQOKe

删除块之间的空间

1 个答案: