1

我正在尝试创建一个水平显示的服务列表，但是display: inline不起作用。如何li水平显示 's？

#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 -->

4

1 回答 1

3

它们没有水平显示，或者由于太宽而无法在该水平空间中显示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;
}
于 2012-06-18T02:27:47.187 回答