align button on the right side

Question

I would like to align the X button to be on the right side next to the User . However, X falls into a new line.

Here is what I have tried.

 <b>ID: </b><ul id="user_id" name="user_id"> User <button type="button" style="display:block;>" class="btn btn-info btn-xs">X</button></ul>

any suggestion appreciated

Answer 1

You need to get the ul > li semantics correct first. Then, since button is by default display-inline , remove the block style, and it should come next without any additional css.

 <b>ID: </b> <ul id="user_id" name="user_id"> <li> User <button type="button" class="btn btn-info btn-xs">X</button> </li> </ul>

Answer 2

使用display: inline-block而不是display: block并且您的 X 将移动到右侧（在同一行中对齐）。