I would like to align these elements horizontally:
<div class="row">
<div class="block">xxxxx</div>
<div class="block">xxxx</div>
<div class="block">xxx</div>
<div class="block"><select multiple></select>
</div>
.row {
width: 100%;
/*margin: 0 auto;*/
text-align: center;
}
.block {
width: 100px;
/*float: left;*/
display: inline-block;
zoom: 1;
}
However the output that I see with the previous code is that:
divS
divS
div1 div2 div3 divS
I want to find a way to align the first three divs with the top part of the select and not with the bottom part.
div1 div2 div3 divS
divS
divS
Is it possible?
Add vertical-align:top
to .block class. Please let me know if you wanted this.
.block {
width: 100px;
/*float: left;*/
display: inline-block;
zoom: 1;
vertical-align:top;
}
.row {
width: 100%;
/*margin: 0 auto;*/
text-align: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.