html - 视口(viewport)外的相关元素

Question

为什么我的下拉面板超出视口(viewport) http://i.stack.imgur.com/Uth7H.png

以及如何解决这个问题，使其不会离开视口(viewport)并在可能时相对于按钮居中

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

.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