Question

我用图像和文字制作div。用户可以将鼠标悬停在此div上以获得下拉列表。我有关于下拉列表的问题。我需要它与悬停的div的右边界对齐：
enter image description here 这是代码：

<div id="hoverDiv">
                <img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
                <a href="#">Hover Me!</a>
                <div class="showme">
                    <p>
                        Hidden Stuff!</p>
                </div>
            </div>

和CSS

#hoverDiv
        {
            width: 100px;
            height: 40px;
            float: right;
            margin-right: 5%;
        }
        #hoverDiv:hover
        {
            background: #ff0000;
        }
        #hoverDiv:hover .showme
        {
            display: inline;
            float: left;
            position: relative;
            margin-left: 5px;
            margin-right: 5px;
        }
        .showme
        {
            display: none;
            width: 100px;
            height: 200px;
            background: #0000ff;
            margin: 0px auto;
            float: left;
            left: -999em;
            padding: 10px 5px 0px 5px;
            border: 1px solid #777777;
            border-top: none;
            z-index: 10;
            position: absolute;
            left: auto;
            top: auto;

        }

Answer 1

在 #hoverDiv 中，添加position:relative

在 #hoverDiv中：悬停div.showme ：
删除float:left（冗余）
删除position:relative（冗余）
删除margin-left:5px＆amp;＆amp;除非您愿意，否则margin-right:5px

在 div.showme 中：
删除float:left（冗余）
删除left:-999em（冗余）
将left:auto替换为right:0

此jsFiddle已完成所有工作。

Answer 2

你的意思是这样吗？ http://jsfiddle.net/nbZmG/9/

这是另一个 - http://jsfiddle.net/nbZmG/10/

请注意，在这两种情况下，蓝框的宽度均为120px，并且使用margin根据红框的左侧和右侧对齐。

希望这会有所帮助。

Answer 3

您在margin-left:5px div上悬停时添加.showme，删除它并且它应该对齐：

#hoverDiv:hover .showme {
    display: inline;
    float: left;
    margin-left: 0; /* here */
    margin-right: 5px;
    position: relative;
}

Answer 4

在#hoverDiv:hover .showme移除margin-left和margin-right。

在.showme移除margin并将padding修改为10px 0px 0px 0px，将border: 1px修改为0px。

div hover下拉 - 下拉对齐问题

4 个答案: