Question

我已将表格宽度设置为窗口宽度，当ul> gt中的图像时，它可以正常工作li是较少但是当图像很大时整个窗口显示滚动，为什么？
所以我使用了style="height:100%;overflow:hidden来获取ul。

html代码

<table border="1" width="100%" height="100%" style="max-width:800px" align="center">
<tr height="40px"><td>tab 1</td><td>tab 2</td></tr>
<tr height="calc(100% - 40px)">
    <td colspan="2">
        <table border="1" width="100%" height="100%">
            <tr>
                <td width="20%">
                    <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden">
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                    </ul>
                </td>
                <td width="60%">
                    <table border="1" width="100%" height="100%">
                        <tr>
                            <td>
                                <table border="1" width="100%" height="100%">
                                    <tr height="calc(100% - 40px)"><td></td></tr>
                                    <tr height="40px"><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table border="1" width="100%" height="100%">
                                    <tr height="calc(100% - 40px)"><td></td></tr>
                                    <tr height="40px"><td></td></tr>
                                </table>                            
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="20%">
                    <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden">
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                    </ul>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

css代码

    #image-list {
    margin: 0;
    padding: 0;
    float: right;
    }
    #image-list li {
    list-style: none;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    }
    .draggable-image{
    width:100%
    }

请任何人帮我解决。

Answer 1

在ul中添加overflow:scroll并给它一个固定的高度，如height:200px，然后你的ul将在溢出时滚动

#image-list {
    margin: 0;
    padding: 0;
    float: right;
    height: 200px;
    overflow: scroll;
}

溢出滚动在表内工作意外

1 个答案: