Question

我理解Bootstrap有一个内置类'list-inline'。它很有效，直到我添加大量文本，然后我得到以下内容：

我希望粉红色的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;
}

Answer 2

请尝试以下

HTML

      <ul class="remove-bullet-list hanging">
        <li>
            <div class="col-sm-2 description">
                <b>Description: </b>
            </div>
            <div class="col-sm-6 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.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;
padding:0px;
}

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

http://www.bootply.com/yCWWBE0mCM

Answer 3

我已经对你的CSS进行了一些修改。您可以看到这适用于所有浏览器。请参阅 DEMO 。

.description {
background-color: green;
float: left;
}
.description-text {
  background-color: pink;
  padding-left: 14px;
  overflow: hidden;
  display:table-cell;
  vertical-align:top; /* vertically align top work with display:table-cell*/

}
li{overflow: hidden;display:table;}

注意：这是 another DEMO 链接，它也很有用，但它在IE浏览器上失败了，这就是为什么我提供了另一种解决方案。

Bootstrap Inline列出大量文本

3 个答案: