3

「float：left」を実行して、ULにLIアイテムを水平に表示させようとしています。

float:left;
display:inline;

ここに例があります - http://jsfiddle.net/Ku9Bm/1/

ご覧のとおり、LI アイテムが水平方向に完全に並んでいます。

しかし、LI 項目の 1 つにさらにテキストを追加すると、UL リストに LI 項目が縦に表示されます。

これがその例です - http://jsfiddle.net/3DGfL/2/

1 つの LI 項目のコンテンツが多い場合でも、同じ行に LI 項目を表示するにはどうすればよいですか?

4

1 に答える 1

5

あなたが探している（私が思うに）動作を取得する別の方法は、別の表示プロパティを使用することです。に対して定義されている現在のスタイルを置き換えるために、このスタイルを試すことができますul.entries li。

ul.entries li {
    display:table-cell;
}

自動改行を減らすためにリスト項目の幅を広げたい場合は、min-widthそこに a を追加することもできます。これで、横方向のリスト項目は幅に関係なく同じ行にとどまり、コンテンツが追加の行に分割する必要がある場合、前のリスト項目で折り返されません。

これがお役に立てば幸いです！幸運を。(実際の動作を見たい場合に備えて、ここにJSFiddleがあります。)

于 2013-06-25T17:16:22.500 に答える