.comment_list li {
min-height: 50px!important;
position: relative;
}
.comment_list {
list-style-type: none;
padding: 0px;
}
.comment_list li:nth-child(odd) {
background-color: #b5ffe4;
width: 428px;
border-bottom: 2px solid #edfff8;
}
.comment_list li:nth-child(even) {
background-color: #95f5d2;
width: 428px;
border-bottom: 2px solid #edfff8;
}
.comment_list li:last-child {
margin-bottom: 10px;
border-bottom: 0px;
}
.comment_list::-webkit-scrollbar {
width: 2px;
} /* this targets the default scrollbar (compulsory) */
.comment_list::-webkit-scrollbar-track {
background-color: #b5ffe4;
} /* the new scrollbar will have a flat appearance with the set background color */
.comment_list::-webkit-scrollbar-thumb {
background-color: rgba(27, 140, 99, 1);
} /* this will style the thumb, ignoring the track */
.comment_list::-webkit-scrollbar-button {
/* background-color: #7c2929; */
display: none;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
.comment_list::-webkit-scrollbar-corner {
background-color: #b5ffe4;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
.comment_list li img {
width: 40px;
height: 40px;
border-radius: 50px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 7px;
position: relative;
}
.comment_list li span {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
text-decoration: underline;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
position: absolute;
margin-top: 8px;
margin-left: 12px;
margin-bottom: 7px;
}
.comment_list li p {
width: 350px;
height: 50px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
position: absolute;
color: rgba(42, 42, 42, 0.9);
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
margin-top: 23px;
margin-left: 12px;
margin-bottom: 8px;
display: inline-block;
float: left;
}
.comment_list li .comment_number {
color: rgba(0, 0, 0, 0.2);
margin-left: 355px;
text-decoration: none;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="comments">
<ul class="comment_list">
<li>
<img src="http://i.imgur.com/N7aIbdn.jpg" class="comment_avatar">
<span>X:</span>
<span class="comment_number">#10</span>
<p>
Lorem ipsum dolor sit amet, ad nulla efficiendi sit, per aeque tempor te. Cu ius quod quas invidunt. Vix omnium quaeque aliquando no, ea vis dicam consul. Ut sanctus consetetur eos, duis euismod sed et. Mea paulo eirmod voluptatum at. Et vim enim dicunt, vis ei agam vocibus lucilius.
</p>
</li>
</ul>
</div>
</body>
</html>我遇到的问题是，在没有固定尺寸的情况下，根据"p"的大小增加"li"的高度。实际页面如下https://i.stack.imgur.com/r2p8z.png。我试过了，但没有结果，请帮我得到答案。。。。。。。。。
我对以下CSS进行了更改：
.comment_list li img {
width: 40px;
height: 40px;
border-radius: 50px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 7px;
float: left;
}
.comment_list li p {
width: 350px;
height: auto;
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
position: relative;
color: rgba(42, 42, 42, 0.9);
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
margin-top: 23px;
margin-left: 12px;
margin-bottom: 8px;
display: inline-block;
float: none;
}