在同一行中对齐 li 项

Question

我试图在同一行中包含 li 项。我设法做到了，但由于某种原因，每个 li 项目都被分成 2 行。我不知道为什么。有什么办法可以修复它吗？

HTML：

<section class="carousel price_carousel">   <!--Price section -->
<div class="wrapper" >
  <ul  class="list">
    <li>TEXT TEXT </li>
    <li>TEXT TEXT TEXT TEXT TEXT</li>
    <li>TEXT TEXT TEXT TEXT TEXT</li>
 </ul>
 </div>

JSfiddle（带 CSS）：http : //jsfiddle.net/bgeswkr4/

Answer 1

删除浮动并将inline-block属性更改为li元素。像这样：

.wrapper {
    text-align: center;
}
.price_carousel .list {
    padding-left: 1em;
    display:block;
    margin: 0;
}
.price_carousel .list li {
    display: inline-block;
    vertical-align: middle;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

我已经white-space: nowrap;为li元素添加了一个声明，它们从不破坏内部，但是您可以将其取下（我通常自己取下它，但取决于您）。

但是，如果您希望UL永远不会中断（因此LI将始终在同一行中），只需将此white-space: nowrap;声明添加到UL

在这里看到小提琴

编辑 以包含项目符号：inline-block元素不显示list-style-type，因此在您的案例中包含项目符号的选项如下：

a) 使用 float:left;

.price_carousel .list li {
    float:left;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

b) 使用背景图像作为项目符号

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap; padding-left:30px; background:url('http://upload.wikimedia.org/wikipedia/commons/e/ef/Bullet_go.png') no-repeat center left;
}

c) 在 HTML 标记中包含一个跨度

HTML 是这样的：

    <ul class="list">
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
    </ul>

和 CSS 是这样的：

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
    padding-left:30px;
}
.bull {
    display:list-item
}