为什么我的下拉面板超出视口(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;
}
最佳答案
试试这个(你有负的左边位置)
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>
关于html - 视口(viewport)外的相关元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35746485/