Question

我有一个可滚动的ul，列表项有背景。由于某种原因，背景仅填充初始可见区域。如果我向下滚动它会消失：

HTML：

<div id="wrapper">
<ul class="list">
    <li class="item1">     
        <span> my text </span>
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg"/>
    </li>
    <li class="item2">
        <span> my text text text text </span>
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
    </li>
    <li class="item3">
        <span> my text text text text </span>
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
    </li>
    <li class="item4">
        <span> my text </span>
                    <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>v         <span> my text </span>          <span> my text </span>          <span> my text </span>          <span> my text </span>
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
    </li>
</ul>

CSS：

html,body{
    height: 100%
}
#wrapper {
    background: transparent;
    width: 550px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:50%;
    overflow-y:auto;
    width: 100%;
}
#wrapper ul > li {
    width: 50px;
    display:block;
    float: left;
    background: black;
    border-radius: 25px 25px 0 0;
    /*overflow: hidden;*/
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    height:100%;
}
#wrapper ul > li span {
    width: 100%;
    display: block;

}
#wrapper ul > li img {
    display: block;
    float:left;
}

如何解决这个问题？

感谢。

更多详情：

所有列的高度必须相同：所以如果一个列真的很长，因为它中有很多文本，那么所有列都需要那么长。

Answer 1

如果您希望它们具有相同的尺寸：

http://jsfiddle.net/9z48t/4/

然后将display:table-row设置为容器（#wrapper ul），将display:table-cell设置为内部元素（#wrapper ul > li）;

Answer 2

#wrapper ul > li {
    width: 50px;
    display:block;
    float: left;
    background: black;
    border-radius: 25px 25px 0 0;
    /*overflow: hidden;*/
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    **height:auto;**
}

将高度100％更改为自动。

列出可滚动UL中的项目背景

2 个答案: