基本上我想将.answer
div彼此对齐。
现在的文本是这样的:
名:Oliver名
:Malan
性别:男
我希望它像这样:
名:Oliver名
:Malan
性别:男
代码:
.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>
将文本包装在一个元素中,例如,label
然后给width
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;
}
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句