從瀏覽器端到屏幕中間的元素的CSS酒吧

Question

我有這樣的問題： 我創建了這樣的想法，但我真的不能讓這個酒吧的左邊部分。 按鈕之間的那些空格必須是透明的。

CSS/HTML

section[role="searchform"] { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    margin-top: 57px; 
 
    width: 100%; 
 
    font-family: 'Open Sans', sans-serif; } 
 
    section[role="searchform"] .body-searchform { 
 
     width: 100%; 
 
     text-align: center; 
 
     color: #fff; } 
 
     section[role="searchform"] .body-searchform .buttons-search { 
 
     height: 84px; 
 
     position: relative; } 
 
     section[role="searchform"] .body-searchform .buttons-search:after { 
 
      content: " "; 
 
      height: inherit; 
 
      background-color: rgba(100, 141, 12, 0.6); } 
 
     section[role="searchform"] .body-searchform .buttons-search:after { 
 
      margin-left: 5px; } 
 
     section[role="searchform"] .body-searchform .buttons-search .search-buttons { 
 
      line-height: 84px; 
 
      margin: 0; 
 
      background-color: #648D0C; 
 
      width: 100px; 
 
      height: 100%; 
 
      display: inline-block; } 
 
      section[role="searchform"] .body-searchform .buttons-search .search-buttons img { 
 
      vertical-align: middle; } 
 

 

<section role="searchform"><div class="body-searchform">  
 
<div class="buttons-search"> 
 
      <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a> 
 
      <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a> 
 
      <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a> 
 
      <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a> 
 
      <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a> 
 
</div> 
 
       </div></section>

這是我的小提琴：https://jsfiddle.net/j2cpmwuq/

Answer 1

的問題是，你需要在右側單獨的彈性元件，離開了.search-buttons使透明的可維持。如果flexbox是一個選項（see support table），你可以嘗試像this fiddle總結如下：

.buttons-search { 
    display: flex; 
} 

.search-buttons { 
    width: 100px; 
    height: 84px; 
    margin: 2px; 
} 

.buttons-search:before, 
.buttons-search:after { 
    content: ''; 
    position: relative; 
    flex-grow: 1; 
    height: 84px; 
    margin: 2px; 
}