html - 外側のdivが固定幅で水平方向にスクロールするときに、内側のdiv幅をテキストに合わせるにはどうすればよいですか？

Question

HTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

Css

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;
}

JSFiddle

必要：

内側のdiv幅はテキストに適合します。そして、テキストは1行だけです。また、内部divは固定幅を使用しません。

このように（このデモLIのマージンは機能しません。） JSFiddle

Answer 1

置く

float:left;
margin:5px;

li>divスタイルで

デモ

またはデモ2

Answer 2

HTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

CSS

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    height: 30px;
    width:400px;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;

}

このフィドルを確認してください。

テキストを壊したくない場合は、overflow-x:scrollプロパティを使用できます

Answer 3

こんにちは今まで

word-break: break-all;

....。

li>div {
    word-break: break-all; // add this line
    height:30px; // remove this line
}

と削除 heightしますli>div

ライブデモ

デモからのHTML

<div class="outer">
    <ul>
        <li>
            <div>text</div>
        </li>
        <li>
            <div>longlonglonglonglonglonglonglonglonglonglonglonglong</div>
        </li>
    </ul>
</div>

デモからのCSS

.outer {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    overflow: scroll;
}

li {
    margin: 5px;
}

li>div {
    cursor: pointer;
    line-height: 30px;
    border: 1px solid #369;
    background-color: #fff;
     word-break: break-all;
}