Question

客户想要这样的东西。我可以管理样式（角落和所有）但我不能让“下拉列表”下拉到左侧单元格中的文本。我的html如下。提前致谢

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div.outside').hide();

            $('div.selector').click(function () {
                var hidden = $(this).parents('td').find('div.outside :hidden').length > 0;
                $('div.outside').hide();
                if (hidden) {
                    $(this).parents('td').find('div.outside').show().animate('slow');
                } else {
                    $(this).parents('td').find('div.outside').hide().animate('slow');
                }
            });

        });

    </script>
    <style type="text/css">
        ul.action
        {
            list-style-type: none;
            list-style-position: outside;
            padding: 0px;
            text-align: left;
            margin: 0px;
        }
        ul li
        {
            margin: 1px 0px 1px 0px;
        }
        div.content
        {
            border-style: solid;
            border-width: 1px;
            padding: 1px;
            white-space: nowrap;
            overflow: auto;
        }

        div.outside
        {
            width: 200px;
            position: absolute;
            z-index: 100;
        }

        div.top
        {
            width: 200px;
        }
        div.selector
        {
            cursor: pointer;
            padding: 1px 1px 0px 1px;
            float: right;
            border-style: solid;
            border-width: 1px;
            border-bottom-style: solid;
            top: 2px;
            position: relative;
        }
        .popup-dropdown
        {
            background-color: #FFFFE1;
        }
        thead td
        {
            font-weight: bold;
            width: 100px;
        }
    </style>
    <title></title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    Rank
                </td>
                <td colspan="2" style="width: 20px;">
                    Style
                </td>
            </tr>
        </thead>
        <tr>
            <td>
                Jimmi Hendrix
            </td>
            <td>
                1
            </td>
            <td>
                Blues-Rock
            </td>
            <td style="width: 20px;">
                <div class='top'>
                    <div class='selector popup-dropdown'>
                        X</div>
                </div>
                <div style='clear: both;'>
                </div>
                <div class='outside'>
                    <div class='content popup-dropdown'>
                        <ul class='action'>
                            <li>Make God Status</li>
                            <li>Elevate</li>
                            <li>Respect</li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                Carlos Santana
            </td>
            <td>
                2
            </td>
            <td>
                Blues-Rock
            </td>
            <td style="width: 20px;">
                <div class='top'>
                    <div class='selector popup-dropdown'>
                        X</div>
                </div>
                <div style='clear: both;'>
                </div>
                <div class='outside'>
                    <div class='content popup-dropdown'>
                        <ul class='action'>
                            <li>Make God Status</li>
                            <li>Elevate</li>
                            <li>Respect</li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate pulvinar
    nisi vel tincidunt. Mauris eget pulvinar enim. Suspendisse vitae turpis id orci
    porttitor auctor nec ut nisi. Nunc euismod. </div>
</body>
</html>

Answer 1

好的。如果我误解了，请纠正我，但我认为你想基本上摆脱'X'旁边的那个间隙，让弹出窗口的右边缘与'X'框的右边缘对齐。你可以通过绝对定位实现这一目标。我在这里改变了小提琴：http://jsfiddle.net/F5bn4/2

我更改了td上的内联样式，并在div.top上将200px更改为20px

css在相邻文本下方显示下拉列表：请参见屏幕截图

1 个答案: