Javascript 引导内联列表大量文本

我知道Bootstrap有一个内置类“list inline”。它非常有效，直到我添加了大量文本，然后我得到以下结果：

我希望粉色的div不要包裹在绿色的div下面。我已经尝试了stackoverflow上的另一篇文章：我无法让float工作

这是我的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>

好的，根据您的要求，

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

---

我对你的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浏览器失败，这就是我提供另一个解决方案的原因

---

这是你想要的吗？Kheema-是的，但我希望文本是换行的，而不是每行分开。这将是一段文字，而不是一行又一行。我分享了一个新的演示链接，同时测试了上面的链接，该链接不适用于IE 11。效果很好！你有什么不同的建议吗？这是坏习惯吗@Husen@LanterneRouge不用担心，它会很好地工作，但是如果你不在li类中添加diplay:table，你可以做以下事情，但是，它在IE浏览器中不起作用，所以建议使用我的主要答案代码

      <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>

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

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

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