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 に答える