如果文本溢出容器,我似乎无法使文本保持在容器的中心。在我的示例中,它是流体布局中的水平菜单。在浏览器窗口缩小到足以使文本溢出之前,它可以正常工作。一旦发生这种情况,它就不再居中,而是仅在右侧重叠。
我怎样才能让它保持居中,即使它不得不溢出它的容器?
这是我的代码:
<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/