將p和div放在同一行

Question

我有創建的卡的類型。它有3行，一個p和一個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; 
} 

Fiddle.

請你的答案後提琴以及！

Answer 1

使用顯示錶，表格行，表格單元格。

http://jsfiddle.net/vnama/

.user_card { 
    background-color: #eee; 
    width: 30%; 
    padding: 10px; 
    display:table; 
} 

.user_card p { 
    display: table-cell; 
    vertical-align:top; 
    line-height:30px; 
    padding:2px 10px 2px 2px; 
} 
.user_card div { 
    display:table-row; 
    padding:2px; 
} 
.user_card div div { 
    display:table-cell; 
} 
.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; 
} 

Answer 2

您可以使用CSS來左浮動

. progress_wrap { 
    float: right; 
} 

Answer 3

HTML

<div class="user_card"> 
<div class="skills"> 
    <p>Skills</p> 
    <div class="progress_wrap" style="margin-left:80px;"> 
     <div class="progress" style="width:95%"></div> 
    </div> 
</div> 
<div class="commitment"> 
    <p style="margin-left:-35px;">Commitment</p> 
    <div class="progress_wrap" style="margin-left:80px;"> 
     <div class="progress" style="width:35%;"></div> 
    </div> 
</div> 
<div class="reputation"> 
    <p style="margin-left:-73px;">Reputation</p> 
    <div class="progress_wrap" style="margin-left:80px;"> 
     <div class="progress" style="width:65%;"></div> 
    </div> 
</div> 

在CSS

.user_card { 
    background-color: #eee; 
    width: 50%; 
    padding: 20px 100px 20px 20px; 

} 

.user_card div p { 
    display: inline; 
    float: left; 
} 
.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; 
} 

Answer 4

您可以嘗試使用表：http://jsbin.com/efugop

我有：

HTML：

<div class="user_card"> 
    <div class="skills"> 
     <table><tr><td> 
     <p>Skills</p></td><td> 
     <div class="progress_wrap" style="margin-left:70px;"> 
      <div class="progress" style="width:95%"></div> 
     </div></td></tr></table></div> 
    <div class="commitment"> 
     <table><tr><td> 
     <p style="position:relative;margin-top:6px;">Commitment</p> 
     <div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;"> 
      <div class="progress" style="width:35%;"></div> 
     </div></td></tr></table> 
    </div> 
    <div class="reputation"> 
     <table><tr><td> 
     <p style="position:relative;margin-top:6px;">Reputation</p> 
     <div class="progress_wrap" style="position:relative;left:35px;margin-left:70px;"> 
      <div class="progress" style="width:65%;"></div> 
     </div> 
     </td></tr></table> 
    </div> 
</div> 

CSS：

 .user_card { 
    background-color: #eee; 
    width: 50%; 
    padding: 20px 80px 20px 20px; 
} 
.user_card div p { 
    display: inline; 
    float: left; 
} 
.user_card div.skills { 
    margin-left: -1px; 
} 
.user_card div div.progress_wrap { 
    background-color: white; 
    width: 100px; 
    border: 1px solid #bbb; 
} 
.user_card div div.progress { 
    height: 30px; 
    background-color: #ddd; 
}