我创建了卡类型。它有 3 行,带有 ap 和一个 div。我希望他们两个站在同一条线上。我怎样才能做到这一点?
HTML:
<div class="user_card">
<div class="skills">
<p>Skills</p>
<div class="progress_wrap">
<div class="progress" style="width:95%"></div>
</div>
</div>
<div class="commitment">
<p>Commitment</p>
<div class="progress_wrap">
<div class="progress" style="width:35%;"></div>
</div>
</div>
<div class="reputation">
<p>Reputation</p>
<div class="progress_wrap">
<div class="progress" style="width:65%;"></div>
</div>
</div>
</div>
CSS:
.user_card {
background-color: #eee;
width: 30%;
padding: 10px;
}
.user_card div p {
display: inline;
}
.user_card div.skills {
margin-left: -1px;
}
.user_card div div.progress_wrap {
background-color: white;
width: 100%;
border: 1px solid #bbb;
}
.user_card div div.progress {
height: 30px;
background-color: #ddd;
}
请张贴小提琴以及您的答案!