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

使用display table，table-row，table-cell。

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

您可以尝试使用表格：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;
}

Answer 3

您可以使用css向左浮动

. progress_wrap {
  float: right;
}

Answer 4

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

将p和div放在同一行

4 个答案: