Question

我正在尝试创建一个水平显示的服务列表，但是display: inline无效。如何水平显示li？

#services {
    border-top: 1px solid #202020;
    padding-top: 40px;
}

#services p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#services ul {
    width: 160px;
}

#services ul li {
    display: inline;
}

#services ul li h2 {
    padding-top: 20px;
    text-align: center;
}

<div id="services">
    <p><span>Services</span></p>
    <ul>
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
    </ul>
    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->

Answer 1

由于ul太宽而不允许多个li显示在该水平空间中，因此它们没有水平显示或排列“内联”任何明显的差异。

问题在这里

#services ul {
    width: 160px;
}

删除此宽度限制以允许多个li水平放置。

此外，为了达到我认为您正在寻找的效果，请尝试为列表项设置设置宽度，并将显示设置为inline-block而不是内联。这将创建我相信你试图实现的水平块。

示例： http://jsfiddle.net/xPCBK/1/

您需要更改的CSS：

#services ul {
    width: 160px;
}

#services ul li {
    display: inline;
}

将此更改为

#services ul {
}
#services ul li {
    display: inline-block;
    width: 160px;
}

如何使用display创建水平列表：inline？

1 个答案: