Bootstrap <li> isn't responding to css? - html

Question

I have this section of html:
<ul id="checkout">
<li>
<p>$1.99 Basket</p>
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
And it displays like so:
For some reason the "$1.99 Basket" is not inline with the quantity form.
My CSS for the section is like so:
#checkout {
display: inline;
}
I simply want the Price and Quantity field on the same level.

Answer 1

Try the below code to pull elements left or right.
#checkout li:nth-child(1) {
display:inline-block;
float:left;
}
#checkout li:nth-child(2) {
display:inline-block;
float:right;
}
After this code don't forget the clear with below code.
#checkout {
clear: both;
}

Answer 2

jsfiddle
Get rid of your <p> tags and add your lis to your css
<style>
#checkout li {
display: inline;
}
#checkout form {
display: inline;
}
</style>
<ul id="checkout">
<li>
$1.99 Basket
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>

Answer 3

Assuming you want them horizontally aligned:
You are setting the <ul> to display: inline;, but you need to set your <li> elements to display: inline-block; so that they will appear on the same line. Just targeting the <ul> will not affect the children.
(The <li> element's default display property value is list-item.)
#checkout li {
display: inline-block;
}