html - 停止列表下拉菜单离开屏幕

Question

我在导航栏中使用 HTML 列表作为下拉菜单。我遇到的问题是，当浏览器窗口很小时，下拉菜单会向左离开屏幕。

我想知道简单居中并在小屏幕上将内容 100% 拉伸(stretch)的最佳方法。

问题出在通知菜单(将鼠标悬停在小信封上)。

我已经提供了一些我从网站上提取的代码，这些代码可以让您了解:http://codepen.io/anon/pen/eBeYXd

将鼠标悬停在最右侧的元素上，将出现菜单，将浏览器设置为手机屏幕的大小，并看到下拉菜单向左移动并被截断。

代码如下:

    <div class="navigation-main">
        <div class="container group">
            <ul class="header-navbar">
                <!-- notes test -->
                <li class="dropdown pull-right alerts-box">
<a href="#" onclick="return false;"><img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
    <li><a href="/index.php?module=articles_full&aid=3&clear_note=9"><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te&hellip;</a>"</li>
    <li class="divider"></li><li><a href="/usercp.php?module=notifications&go=clear">Clear all</a></li>
    <li class="divider"></li>
    <li><a href="/usercp.php?module=notifications">See all</a></li>
</ul>
</li>
<!-- notes test -->
            </ul>
        </div>
    </div>

CSS 代码:

*, *:before, *:after {
    box-sizing: inherit;
}
.navigation-main {
    position: fixed;
    top: 0;
    width: 100%;
    height: 49px;
    z-index: 10001;
    background-color: #222;
}
.header-navbar {
    list-style: none;
    padding: 0;
    margin: 0;
}
.header-navbar>li {
    float: left;
}
.header-navbar>.pull-right {
    float: right;
}
.header-navbar>li>a {
    display: block;
    color: #999;
    padding: 14px;
}
.header-navbar>.active>a {
    color: #FFF;
    background-color: #000;
}
.header-navbar>li>a:hover {
    color: #FFF;
    text-decoration: none;
}
.header-navbar>.header-brand>a {
    line-height: 0;
    padding: 9px 14px;
    margin-left: -14px;
}
.header-search {
    padding: 9px 0;
}
.header-search .search-field {
    width: auto;
    background-color: #333;
    border: 1px solid #5c5c5c;
    outline: none;
    line-height: 19px;
    height: 30px;
    color: #fff;
    margin: 0;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.header .dropdown-menu {
    border-top-width: 1px;
}
.header .dropdown:hover .caret {
    border-top-color: #FFF;
}
.header-avatar {
    padding: 9px 0 9px 14px;
}
.dropdown {
    position: relative;
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px solid #999;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: ""
}
.dropdown-menu {
    position: absolute;
    top: 49px;
    left: 0;
    z-index: 999;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background-color: #222;
    border: 1px solid #000;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
    display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
    *width: 100%;
    height: 1px;
    padding: 0px;
    margin: 9px 0;
    *margin: -5px 0 5px;
    overflow: hidden;
    background-color: #383838;
}
.dropdown-menu a {
    display: block;
    clear: both;
    line-height: 26px;
    color: #999;
    white-space: nowrap;
    padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
    text-decoration: none;
    color: #fff;
}
.pull-right .dropdown-menu {
    right: 0;
    left: auto;
}
.pull-right {
    float: right;
}
.nav-avatar {
    vertical-align: middle;
    background-color: #333;
}

Answer 1

使用 min-width: 或 max-width: 并可能允许您的文本换行

像这样

.dropdown-menu a {
    display: block;
    clear: both;
    line-height: 26px;
    color: #999;
    min-width: 200px;
    white-space: wrap;
    padding: 2px;
}