CSS：すべてのリンクを水平方向にスクロールしてページ幅がなくなるようにすることはできません

Question

私はページ内のすべてのリンクを水平方向にスクロールしようとしています。これらを水平にフロートさせましたが、本文の幅は100％に設定されています（ページの他の要素のために必要です）。ここ

は、マークアップです：

<div class="header"> 
    <div class="filters"> 
    <a data-filter="*">All</a> 
    <a data-filters=".anim">animals</a> 
    <a data-filters=".benc">benches and sofa</a> 
    <a data-filters=".colu">columns and pillars</a> 
    <a data-filters=".entr">entry gates</a> 
    <a data-filters=".fire">fire places</a> 
    <a data-filters=".flow">flower pot</a> 
    <a data-filters=".foun">fountain</a> 
    <a data-filters=".gaze">gazebo</a> 
    <a data-filters=".jaal">jaalis and grills</a> 
    <a data-filters=".ligh">light lamps</a> 
    <a data-filters=".natu">natural planters</a> 
    <a data-filters=".stat">statues</a> 
    <a data-filters=".wash">wash basins</a> 
    </div> 
</div> 

と彼女は、CSSです：あなたが必要な場合は

.header{ 
    height: 180px; 
    width: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
.header .filters{ 
    background-color: whitesmoke; 
    position: fixed; 
    width:auto; 
    margin-top: 130px; 
    max-height: 50px; 
    z-index: 1000; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    padding: 17px 10px; 
    white-space: nowrap; 
} 

.header .filters a{ 
    margin: 0 10px; 
    font-family: LatoWebLight; 
    font-size: 16px; 
    width: 150%; 
    cursor: pointer; 
} 

はまた同じのためJSfiddleを提供します！

私はこのdiv内の要素のみをスクロールし、すべての要素とページ全体を必要としません！すべてのヘルプ:)

Answer 1

ため

おかげであなたは、要素がコンテンツと一緒に成長し、スクロールを作成しないで作る.filter要素、上width: autoを持っていました。私はそれをwidth: 100%に変更しましたが、今はスクロールします。

padding: 17px 10px;の値を幅内に数えさせるために、box-sizing: border-box;も追加しました。

html, body { 
 
    margin: 0; 
 
} 
 
.header{ 
 
    height: 180px; 
 
    width: 100%; 
 
} 
 
.header .filters { 
 
    background-color: whitesmoke; 
 
    position: fixed; 
 
    width:100%; 
 
    margin-top: 130px; 
 
    max-height: 50px; 
 
    z-index: 1000; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    padding: 17px 10px; 
 
    white-space: nowrap; 
 
    box-sizing: border-box; 
 
} 
 

 
.header .filters a{ 
 
    margin: 0 10px; 
 
    font-family: LatoWebLight; 
 
    font-size: 16px; 
 
    width: 150%; 
 
    cursor: pointer; 
 
}

<div class="header"> 
 
    <div class="filters"> 
 
    <a data-filter="*">All</a> 
 
    <a data-filters=".anim">animals</a> 
 
    <a data-filters=".benc">benches and sofa</a> 
 
    <a data-filters=".colu">columns and pillars</a> 
 
    <a data-filters=".entr">entry gates</a> 
 
    <a data-filters=".fire">fire places</a> 
 
    <a data-filters=".flow">flower pot</a> 
 
    <a data-filters=".foun">fountain</a> 
 
    <a data-filters=".gaze">gazebo</a> 
 
    <a data-filters=".jaal">jaalis and grills</a> 
 
    <a data-filters=".ligh">light lamps</a> 
 
    <a data-filters=".natu">natural planters</a> 
 
    <a data-filters=".stat">statues</a> 
 
    <a data-filters=".wash">wash basins</a> 
 
    </div> 
 
</div>