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 < / p>

See fiddle here

编辑包括小包： 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
}

Answer 2

在Chrome中它可以正确渲染，如果你让窗口变大，它们都会显示在同一条线上...由于线条的长度以及你在左边添加了一个边距，这里＆＃ 39;除非你让窗户足够大，否则他们没有空间留在同一条线上。

enter image description here

我现在看到它在Firefox中它确实分为两行......我的第一个假设是你加入了这种风格：

list-style-position: inside;

enter image description here

如果删除它，则它会正确呈现。

enter image description here

好像Firefox可能在list-style-position方面存在一些问题。这是我在Bugzilla上发现的类似问题：https://bugzilla.mozilla.org/show_bug.cgi?id=36854

将li项目对齐在同一行

2 个答案: