Html Bootstrap：CSS - 列表组项目的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24285260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: CSS - height of list-group-item
提问by User999999
Please Consider follow JSFiddle:
请考虑遵循 JSFiddle：
As you might notice: the list-group-itemis fully collapsed. And i can't seem to make it autoadjust. (e.g. height:auto;)
您可能会注意到：list-group-item已完全折叠。而且我似乎无法让它自动调整。（例如height:auto;）
yet when i supply the css rule:height:20px;, then the row size is adjusted.
How can i make the height of an list-group-item to adjust to size of the content?
然而，当我提供 css rule: 时height:20px;，会调整行大小。如何使列表组项目的高度适应内容的大小？
Thank you for your time.
感谢您的时间。
回答by Peter Wooster
You can add overflow:hiddenor other "clear-fix" code to the list-group-item if you need to retain the floats within the items. Floats always cause problems with the height of the floated items. Clearing them or setting overflow will force the height to be calculated properly. See CSS: Floating divs have 0 heightfor more info on this.
overflow:hidden如果您需要保留项目中的浮动，您可以向列表组项目添加或其他“清除修复”代码。浮动总是会导致浮动项目的高度出现问题。清除它们或设置溢出将强制正确计算高度。有关更多信息，请参阅CSS：浮动 div 的高度为0。
.list-group-item
{
overflow:hidden;
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
Since you are using Bootstrap you could add the class="clearfix"to HTML for the list-group-items
由于您使用的引导您可以添加class="clearfix"到HTML的list-group-items
回答by Last1Here
Removing the float: left;from .itemDescriptionwill fix your issue fiddle, so the complete style for .itemDescriptionwill be:
删除float: left;from.itemDescription将解决您的问题fiddle，因此完整的样式.itemDescription将是：
.itemDescription
{
width: 30%;
vertical-align: middle;
height: 100%;
line-height:100%;
vertical-align: middle;
}
