18

いくつ<ul>かの<li>アイテムがすべて一列に並んでいます。には<li>ネストされた<span>と があり<img>ます。<img>高さはすべてのアイテムですべて同じです。ただし、<span>アイテムには、1 行または 2 行にまたがるテキストが含まれます (テキストによって異なります)。

display:block、float:left、 、および見つけた他のいくつかの提案を適用しようとしheight:100%ましたが、短い<li>アイテムは背の高いアイテムと同じ高さになりません<li>。<li>そのため、短いアイテムの下にスペースが残っています。誰にもこれに関する提案はありますか？

4

3 に答える 3

15

この場合、 height:100% を設定すると、親から高さを継承しません。リスト項目の高さを div #wrapper の 100% にしたい場合は、ul の高さを 100% に設定し、div #wrapper の高さをピクセルまたは em で設定する必要があります。

http://jsfiddle.net/SF9Za/1/

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

ブラウザ ウィンドウの高さいっぱいまで拡大したい場合は、css の html、body の高さを 100% に設定し、すべての要素を li (html、body、 div#wrapper、ul.list、および li) の高さは 100% である必要があります。

http://jsfiddle.net/YdGra/

html, body{
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

これについては、次のリンクを参照してください。

于 2013-06-26T18:20:15.653 に答える
0

list-style-positionコンテナulを変更すると修正されるかもしれません

于 2013-06-26T15:58:20.277 に答える