html - Align divs under each other -
basically want align .answer
div under each other.
the text this:
firstname: oliver
lastname: malan
gender: male
and want this:
firstname: oliver
lastname: malan
gender: male
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>
wrap text in element, such label
, give 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>
Comments
Post a Comment