1

だから私は、li 要素の行がページの幅の 100% を埋めることを可能にする HTML/CSS を作成しようとしています。各 li 内のコンテンツは動的であるため、可変幅 (通常は 1 つまたは 2 つの単語) にすることができます。各 li セクションもコンテンツの幅である必要があり、等しくはありません。

私は現在、jsFiddleで見ることができるこれを行うためにdisplay:tableとdisplay:table-cellを使用しています。

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

http://jsfiddle.net/fHL7y/3/

ただし、ページの幅が変更されると (バーを jsFiddle にドラッグすると)、項目がまとまって画面からはみ出します。CSS を使用して、li が下の次の行に流れ落ちることがありますか?

4

3 に答える 3

1

これを試して

http://jsfiddle.net/fHL7y/4/

.floatcss {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:center;
word-wrap:break-word;/* Added this */
 }

.floatcss li {
float:left;
width:100%; /* Added this */
 }
于 2013-09-05T22:30:53.247 に答える
1

画面幅の 100% 以内に配置することはできません。また、次の行にフロートすることもできません。相互に排他的な 2 つのレイアウトを求めています。

特定のページ幅が満たされるまで、li を画面幅の 100% 以内に配置したい場合は、メディア クエリを使用できます。

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

@media (max-width: 599px) { //Everything in here activates when window is less than 600px
    ul {
        display:block;
    }

    ul li {
        display:block;

    }
}
于 2013-09-05T22:31:19.797 に答える