Vd: Ta có một input text ỏ giữa hai label mà kích thước text của label có thể thay đổi, nhưng mà input text của ta thì luôn chiếm chiều dài còn lại của hai label, ta xem hình sau.
1. Ta giải quyết nó như sau
HTML
<div class="parent"> <label class="lb-first">First label</label> <label class="lb-second">Second label</label> <div class="wrapper-input"> <input type="text" /> </div> <div class="clearfix"></div> </div>CSS
.parent { background: yellow; } .lb-first { float: left; } .wrapper-input { overflow: hidden; display: block; padding: 0px 10px; } input { width: 100%; } .lb-second { float: right; } .clearfix { clear: both; }
No comments:
Post a Comment