Question

所以当我将鼠标悬停在我的用户名div上时会出现一个下拉框。但是这个框并不总是像宽度可变的用户名div一样宽，所以它看起来很奇怪。我可以通过将下拉框的位置更改为relative来解决此问题。但是当框出现时，整个页面向下移动。有没有办法将位置保持为absolute但仍包含在包装器中？这里是要展示的jsFiddle。谢谢你的阅读。

<div id = "wrapper" style = "border:1px solid red;">
          <div id = "username">hover over me</div>
            <div id = "accBox">
              <ul>
                <li>sign&nbsp;out</li>
                <li>my&nbsp;profile</li>
                <li>new&nbsp;account</li>
              <ul>
            </div>
        </div>


   #username{
       color:grey;
       cursor:default;

    }

#accBox{
    border:1px solid grey;
    display:none;
    position:absolute;
    background-color:#fff;
}

#accBox ul{
        font-family:Arial, Helvetica, sans-serif;
        padding:0px;
        margin:0px;
}

#accBox li{
    list-style:none;
    margin: 0px;
    padding:6px;
    overflow:hidden;
    font-size:13px;
    cursor:pointer;
    text-align:left;
}

#accBox li:hover{
              background-color: #DAD6D6;
}

Answer 1

请参阅此fiddle

添加

left:8px;
right:8px;

这将使无序列表项与div容器#accBox一样宽。较小的值将增加其宽度，较大的值将减小其宽度。

到#accBox

Answer 2

首先，您需要在父position: relative上设置div，以便它包含您的absolute下拉列表：

<div style = "border:1px solid red;position: relative;">

接下来，您可以在下拉列表中设置left: 0; right: 0，使其占据宽度：

#accBox{
    border:1px solid grey;
    display:none;
    position:absolute;
    background-color:#fff;
    left: 0;
    right: 0;
}

FIDDLE

使下拉框适合内部包装，没有相对位置

2 个答案:

请参阅此fiddle