Inline LI with Spans - html

Question

I have a button called Delete next to a link inside a DIV per list item. To confirm I have another button that should appear next to called Confirm Delete. When that is clicked it is posted back to server. The Delete appears correctly but the confirm drops down to the next line instead of appearing on the same line.
Source:
<ul>
<li>
<div style="font-size: x-large;">
<a href="/item/detail/123>Rearden Steel</a>
</div>
<button type="button" name="delete" value="Delete" onclick="ShowDeleteButton('Delete123', this);" class="btn btn-default btn-primary disableOnClickSubmit">Delete</button>
<span id="Delete123" style="display: none;">
<form action="/item/ItemDelete" method="post">
<input id="id" name="id" type="hidden" value="123" />
<button type="submit" name="deleteConfirm" value="DeleteConfirm" class="btn btn-default disableOnClickSubmit">Confirm Delete</button>
</form>
</span>
</li>
<li> ... </li>
<ul>
What style do I need to apply to have the confirm Delete button appear on the same line as the link and Delete button?
I'm using Bootstrap 3.
Bootply Example: http://www.bootply.com/VsU984gbLs

Answer 1

You just need to do either of these to make <li> come in the same line.
display: inline-block: You should ensure you have no space character between <li>s.
float: left: You should ensure to clear the floats.
Remember the caveats above. Since you are using Bootstrap, you may use the utility class: pull-left or pull-right. The best thing is to make sure the pattern you want is already present in the framework and use the mark-up instead of creating your own styles.