1

水平方向に表示されるサービスのリストを作成しようとしています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 -->

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 に答える