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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -