引导内联列表大量的文本

Bootstrap Inline list large amount of text

本文关键字：文本 列表      更新时间：2023-09-26

我知道Bootstrap有一个内置的类'list-inline'。在我添加大量文本之前，它工作得很好，然后我得到以下内容:

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

我想粉红色的div不包装下面的绿色div。我已经尝试了另一个帖子stackoverflow:如何在一个行内块与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;
}

小提琴:

好吧，根据你的要求，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;
}

请尝试以下

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

我已经稍微修改了你的CSS。您可以看到这适用于所有浏览器。演示看到。

.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;}

注意:这里是另一个演示链接，也工作得很好，但它在IE浏览器失败，这就是为什么我提供了另一个解决方案。

相关文章：