将div对齐

时间:2016-05-28 18:15:50

标签: html css alignment

基本上我想将.answer div对齐。

现在的文字是这样的:

姓:奥利弗
名字:马兰
性别:男性

我希望它是这样的:

姓:奥利弗
名字:马兰
性别:男性

CODE:

.profile-data {
  padding-left: 170px;
  padding-top: 50px;
}
h3.header-h3 {
  font-size: 26px;
}
.data {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #666;
  padding: 7px;
  width: 60%;
}
.answer {
  margin-left: 100px;
  position: relative;
  display: inline-block;
}
<div class="profil-data">

  <h3 class="header-h3">Personal Info</h3>

  <div class="data">
    Name:
    <div class="answer"><b>Oliver</b>
    </div>
  </div>

  <div class="data">
    Lastname:
    <div class="answer"><b>Malan</b>
    </div>
  </div>

  <div class="data">
    Gender:
    <div class="answer"><b>Male</b>
    </div>
  </div>

</div>

1 个答案:

答案 0 :(得分:1)

将文本包装在元素中,例如label并提供width

&#13;
&#13;
label {
  width: 150px;
  display: inline-block
}
.profile-data {
  padding-left: 170px;
  padding-top: 50px;
}
h3.header-h3 {
  font-size: 26px;
}
.data {
  font-size: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #666;
  padding: 7px;
  width: 60%;
}
.answer {
  position: relative;
  display: inline-block;
}
&#13;
<div class="profil-data">

  <h3 class="header-h3">Personal Info</h3>

  <div class="data">
    <label>Name:</label>
    <div class="answer"><b>Oliver</b>
    </div>
  </div>

  <div class="data">
    <label>Lastname:</label>
    <div class="answer"><b>Malan</b>
    </div>
  </div>

  <div class="data">
    <label>Gender:</label>
    <div class="answer"><b>Male</b>
    </div>
  </div>

</div>
&#13;
&#13;
&#13;