javascript - Bootstrap 内联列表大量文本

Question

我知道 Bootstrap 有一个内置类“list-inline”。在我添加大量文本之前效果很好，然后我得到以下内容:

http://postimg.org/image/4ygjowp43/

我希望粉红色的 div 不包裹在绿色的 div 之下。我试过关于 stackoverflow 的另一篇文章:How to wrap lines in an inline-block with CSS?而且我无法让花车工作。

这是我的 HTML:

        <ul class="remove-bullet-list hanging">
            <li>
                <div class="description">
                    <b>Description: </b>
                </div>
                <div class="description-text">
                    Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text. Large amount of text.
                </div>
            </li>
        </ul>

这是我的 CSS:

.description {
    background-color: green;
    overflow: hidden;
    float: left;
}

.description-text {
    background-color: pink;
    padding-left: 14px;
}

Answer 1

Fiddle:

好吧，根据您的要求，display:table 效果最好。

你的风格将是，

.description-text {
    background-color: pink;
    display: table-cell;
    padding-left: 14px;
    width: 100%;
}
.description {
    background-color: green;        
    overflow: hidden;
}
.remove-bullet-list li {
    display: table;
}