水平に整列したタブの幅をブラウザズームとどのように一致させますか？

Question

私は幅600px、高さ30pxのdivコンテナを持っていて、7つの「日タブ」divと2つの小さい「arrow」divを含んでいます。矢印とタブを "days_panel" divの中央に置くことができますが、ズームするとブランケットスペースが作成されます。誰もがタブを中央に置いて水平に整列させるための良いテクニックを知っていますか？

ありがとうございました！

EDIT：コードを追加しました！ごめんなさい！

/* -----------------MAIN CONTAINER ----------------------*/ 
.container{ 
position: relative; 
top: 5px; 
margin-left: auto; 
margin-right: auto; 
width: 1024px; 
height :1000px; 
} 

/* ---------------- CENTER PANEL ---------------- */ 
.center{ 
float:left; 
margin-left:5px; 
width:600px; 
height: 100%; 
background-color:#C6AEC7; 
} 

.days_panel{ 
width:100%; 
height:30px; 
background-color: white; 
} 

.day{ 
float:left; 
position:relative; 
margin-left: 6px; 
width: 11%; 
height:100%; 
background-color:black; 
} 

.left_day_arrow{ 
float:left; 
position:relative; 
width:5%; 
height:100%; 
background-color: springgreen; 
} 

.right_day_arrow{ 
float:right; 
position:relative; 
width:5%; 
height:100%; 
background-color: springgreen; 
} 

Answer 1

なぜあなたは使用する割合：ここ

はHTML

 <div class ="container"> 
     <div class ="center"> 
      <div class="days_panel"> 
       <div class="left_day_arrow"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="day"></div> 
       <div class="right_day_arrow"></div> 
      </div> 
     </div> 
     </div> 

とCSSのですか？各項目の幅をピクセルで簡単に設定できます。

もっと見ると、day要素の幅は11％です。 11％x 7 = 77％ 矢印は5％です。 5％×2 = 10％である。その合計は87％です。だから、あなたはそれの間に空きスペースを得ることはかなり論理的です。

もし私がこれらの要素を持っていたら、日の幅を80pxに、矢印を20pxにそれぞれ設定します。このようにして600ピクセルになります。

これが役に立ちます。