html - Align button with input fields that has no title -
i have 2 fields titles , button without title after that.
how can make button aligned input fields instead of titles?
.input-x-box { float: left; } .input-y-box { float: left; } <div class="input-x-box inline"> <div class="title">add new stuff</div> <div class="bootstrap input-group input-group-sm btn-group"> <input type="text" class="form-control" value="" placeholder="enter stuff"> </div> </div> <div class="input-y-box inline"> <div class="title"> more</div> <div class="bootstrap input-group input-group-sm btn-group"> <input type="text" class="form-control" value="" placeholder="enter stuff"> </div> </div> <div class="group-btn inline"> <button class="btn btn-default green-bg">add</button> </div>
if use display: inline-block instead of float, of items line along bottom, because default vertical-align baseline, tells browser render baseline of box aligned baseline of parent box.
you should use floats when want flow around item, image in paragraph.
.inline { display: inline-block; } <div class="input-x-box inline"> <div class="title">add new stuff</div> <div class="bootstrap input-group input-group-sm btn-group"> <input type="text" class="form-control" value="" placeholder="enter stuff"> </div> </div> <div class="input-y-box inline"> <div class="title"> more</div> <div class="bootstrap input-group input-group-sm btn-group"> <input type="text" class="form-control" value="" placeholder="enter stuff"> </div> </div> <div class="group-btn inline"> <button class="btn btn-default green-bg">add</button> </div>
Comments
Post a Comment