html - 如何将元素符号列表与同一行上的其他文本对齐-Bootstrap 3

我正在尝试完成以下任务：

项目符号列表项目其他文本
项目符号列表项目其他文本
项目符号列表项目其他文本

到目前为止，我有以下内容，但是我得到了重叠效果。有什么建议么？谢谢。

<ul>
   <li class='pull-left'>Price #1:</li><span class='pricing-reservations-large-price'>$100</span>
   <li class='pull-left'>Price #2:</li><span class='pricing-reservations-large-price'>$200</span>
</ul>

.pricing-reservations-large-price {
   display:block;
    padding: 1.5%;
    width:auto;
    float: left;
    height:auto;
    border-radius:10%;
    -moz-border-radius:10%;
    -webkit-border-radius:10%;
    -khtml-border-radius: 10%;
    background:#eee;
    text-align:center;
    font-size: 26px;
    font-weight: 700;
    color: #870820;
}

最佳答案

不是ul的li中不能直接包含任何内容。最好将span放在li内。另外，我根本不需要.pull-left：

<ul>
   <li>Price #1:<span class='pricing-reservations-large-price'>$100</span></li>
   <li>Price #2:<span class='pricing-reservations-large-price'>$200</span></li>
</ul>

除非您确实需要旧版IE支持，否则也需要display: inline-block;：

.pricing-reservations-large-price {
    display:inline-block;
    padding: 1.5%;
    -moz-border-radius:10%;
    -khtml-border-radius: 10%;
    -webkit-border-radius:10%;
    border-radius:10%;
    background:#eee;
    font-size: 26px;
    font-weight: 700;
    color: #870820;
}

附言：width: auto，height: auto和text-align: center在这里并没有做太多事情，border-radius应该总是在扩展版本之后。

小提琴：http://jsfiddle.net/RYsbT/1/