2

I need UL list to be placed inside the p tag. I have added inside p tag only but it is not exactly starting inside p tag. And also p tag has 1600px of width so I need the li elements to extend beyond that width (I have scroll bar for tat). Now li elements are flowing in multiple lines.

Here is my demo http://jsfiddle.net/VvuU4/2/

4

1 に答える 1

2

ul残念ながら、HTMLでは（またはdiv）を内部に配置することはできないpため、ブラウザはこれからDOMを自動的に修正します。

<p>
    <ul><li>etc</li></ul>
</p>

...次のようになります：

<p></p>
<ul><li>etc</li></ul>
<p></p>

組み込みの開発者ツールを使用してこれを確認できます。したがって、マークアップを変更する必要があります。おそらく、pをdiv？に変更します。

質問の2番目の部分については、ここから始めるとよいでしょう。

ul.list2 {
    width: 500px; /* adjust to suit your needs */
    overflow: auto;
    white-space: nowrap;
}
ul.list2 li {
    display: inline-block;
    vertical-align: top;
}

必要に応じてスクロールバーを使用するように設定し、そのul中のインライン要素に折り返さないように指示します。次に、リストアイテムをインラインブロックアイテムに設定します。これにより、リストアイテムは並べて配置されますが（display：inline;のように）、ブロックアイテムのように動作します（つまり、マージン、パディング、幅、高さは期待どおりに機能します）。

于 2012-07-31T13:11:15.230 に答える