Question

为什么我的下拉列表退出视口 http://i.stack.imgur.com/Uth7H.png

以及如何解决这个问题，以便它不会离开视口并且在可见时相对于按钮居中

http://i.stack.imgur.com/HHOo9.png

如果可能，仅使用CSS

这是HTML

<div class="dropdown-container">
        <button class="button-std dropdown">
            <span class="glyphicon-home"></span>
            <span> Dropdown Button</span>
        </button>
        <div class="dropdown-positionner">
            <div class="dropdown-std">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Another Link</a>
            </div>
        </div>
    </div>

这是CSS

    .dropdown-container {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.dropdown-positionner {
    position: absolute;
    left: 50%;
}
.dropdown-std {
    position: relative;
    display: none;
    left: -50%;
}
.dropdown-container:hover .dropdown-std {
    display: block;
}

Answer 1

你的CSS正在移动它的内容，这里有小提琴和CSS内容：

    .dropdown-container {
        position: relative;
        display: inline-block;
        white-space: nowrap;
    }
    .dropdown-positionner {
        position: absolute;
    }
    .dropdown-std {
        position: relative;
        display: none;
        left: 0%;
    }
    .dropdown-container:hover .dropdown-std {
        display: block;
    }

https://fiddle.jshell.net/j1kvfzzf/

Answer 2

试试这个（你有左侧负面位置）

<强> CSS

.dropdown-container {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.dropdown-positionner {
    position: absolute;
    left: 50%;
}
.dropdown-std {
    position: relative;
    display: none;
    left: -50%;
}
.dropdown-container:hover .dropdown-std {
    display: block;
}

.dropdown-positionner-edge {
    left: 0;
}

.dropdown-positionner-edge .dropdown-std {
    left: 0;
}

<强> HTML

<div class="dropdown-container">
  <button class="button-std dropdown">
    <span class="glyphicon-home"></span>
    <span> Dropdown Button</span>
  </button>
  <div class="dropdown-positionner dropdown-positionner-edge">
    <div class="dropdown-std">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Another Link</a>
    </div>
  </div>
</div>



<div class="dropdown-container">
  <button class="button-std dropdown">
    <span class="glyphicon-home"></span>
    <span> Dropdown Button</span>
  </button>
  <div class="dropdown-positionner">
    <div class="dropdown-std">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Another Link</a>
    </div>
  </div>
</div>

<强> DEMO HERE

视口之外的相对元素

2 个答案: