Bootstrap <li>没有响应css？

Question

我有html的这一部分：

<ul id="checkout">
    <li>
        <p>$1.99 Basket</p>
    </li>
    <li>
        <form>
            QTY: <input type="number" name="quantity" min="0">
        </form>
    </li>
</ul>

它显示如下：

出于某种原因，“1.99美元购物篮”与数量形式不符。

我的CSS部分是这样的：

#checkout {
    display: inline;
}

我只想将价格和数量字段放在同一水平上。

Answer 1

尝试使用以下代码向左或向右拉动元素。

#checkout li:nth-child(1) {
 display:inline-block;
 float:left;
}

#checkout li:nth-child(2) {
 display:inline-block;
 float:right;
}

在此代码之后，请不要忘记以下代码清除。

#checkout {
 clear: both;
}

Answer 2

假设您希望它们水平对齐：

您要将<ul>设置为display: inline;，但您需要将<li>元素设置为display: inline-block;，以便它们显示在同一行。仅定位<ul>不会影响孩子。

（<li>元素的默认display属性值为list-item。）

#checkout li {
    display: inline-block;
}

Answer 3

jsfiddle

删除您的<p>代码并将li添加到您的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>