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

Question

我正在努力完成以下任务：

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

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

<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;
}

Answer 1

Jsfiddle Example

尝试将CS​​S更改为：

.pricing-reservations-large-price {
    padding: 1.5%;
    display:inline-block;
    margin:5px;
    width:auto;
    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;
}

你的HTML要：

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

Answer 2

不能直接在ul中拥有li的任何内容。{p>最好将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;
}

PS：width: auto，height: auto和text-align: center在这里做的并不多，border-radius应始终 扩展版本。

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

Answer 3

ul li{
    margin-bottom:20px;
}

.pricing-reservations-large-price {
    padding: 1.5%;
    width:auto;
    height:auto;
    border-radius:10%;
    background:#eee;
    text-align:center;
    font-size: 26px;
    font-weight: 700;
    color: #870820;
    clear:both;
    margin-bottom:20px;
}

Jsfiddle Example