css - 要素を強制的に水平に配置します

Question

divにランダムな子があり、レイアウトに合わせて高さと幅を100％に固定しているとします。

子要素を強制的に水平方向に整列させるには、どのCSSを使用する必要がありますか。また、divの幅がコンテンツよりも小さい場合は、スクロールバーを表示し、互いに重ならないようにしますか？

フィドル： http： //jsfiddle.net/GRBc6/1/

単純なcss：

.parent{
    width:500px;
    height: 50px;
    background-color: red;
}
.kid{
    width: 150px;
    height: 20px;
     background-color: green;
    float:left;
    margin-left:4px; 
}

Answer 1

あなたが子供をinline-block要素にして離陸するとfloat:left、あなたは親に持たせることができwhite-space:nowrap、それはあなたが望むものを達成するでしょう：

.parent{
    width:300px;
    height: 50px;
    background-color: red;
    white-space:nowrap;
    overflow-x:scroll;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    display:inline-block;
    margin-left:4px;

}

http://jsfiddle.net/GRBc6/6/

Answer 2

.parent：overflow-x:scrollとに2つのプロパティを追加し、kidswhite-space:nowrapのプロパティをに変更する必要があります。動作するコードは次のとおりです。floatdisplay: inline-block

.parent{
    width:500px;
    height: 50px;
    background-color: red; 
    overflow-x: scroll;
    white-space: nowrap;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    margin-left:4px; 
    display: inline-block;
}

Answer 3

または、単一行のテーブルを使用することもできます。tr → td したがって、その中の要素が折り返されることはありません。