0

如果文本溢出容器，我似乎无法使文本保持在容器的中心。在我的示例中，它是流体布局中的水平菜单。在浏览器窗口缩小到足以使文本溢出之前，它可以正常工作。一旦发生这种情况，它就不再居中，而是仅在右侧重叠。

我怎样才能让它保持居中，即使它不得不溢出它的容器？

这是我的代码：

<style type="text/css">

#access {
    background: #e2e2e2;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
}

#access div {
    width: 100%
    margin-left:auto;
    margin-right:auto;
}

#access ul {
    font-size: 0.9em;
    list-style: none outside none;
    display: inline-block;
    width: 100%;
    text-align: center;
}

#access li {
    width: 15%;
    position: relative;
    margin-right: 1%;
    float: left;
}

#access a {
    color: #fff;
    width: 62%;
    margin-left:auto;
    margin-right:auto;
    background: #CB2027;
    display: inline-block;
    line-height: 2.2em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.2em;
    padding: 0px 1em;
    white-space: nowrap;
}
</style>
<nav id="access" role="navigation"> 

<div class="menu-test-menu-container"><ul id="menu-test-menu" class="menu">
<li id="menu-item-29"><a href="http://google.com/">Home</a></li>
<li id="menu-item-30"><a href="http://google.com/">Item 1</a></li>
<li id="menu-item-31"><a href="http://google.com/">Long item</a></li>
<li id="menu-item-32"><a href="http://google.com/">Item 3</a></li>

</ul></div></nav>

这里是现场直播：http: //jsfiddle.net/Psymz/

4

1 回答 1

0

给min-width财产#access。像这样的东西：

#access{
     min-width: 1024px; /* low resolution value */
}

工作小提琴（调整窗口大小以检查）

于 2013-03-05T12:35:27.777 回答