刪除塊之間的空間

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