拆分菜單成3個部分[左，中，右]概工作

http://jsfiddle.net/DWLZG/拆分菜單成3個部分[左，中，右]概工作

我有我已經分成3個不同的部分的菜單。但是，當瀏覽器縮小到更小尺寸時，定位在中心的鏈接不能充分擴展。

如果您嘗試將瀏覽器調整爲較小的尺寸，您可以看到在LEFT（LEFT和CENTER之間存在很大差距）之前，RIGHT-most和CENTER鏈接以相互碰撞的方式相互碰撞。如果我把中心div CSS設置爲「absolute/left：50％」，那麼所有的比例尺都可以很好地縮放，但是我會遇到一個互相重疊的CENTER鏈接的新問題。

在HTML中我不能指定任何類。

我怎樣才能實現足夠的可擴展性？

HTML：

<ul id="menu"> 
<li id="left"><a href="#">Link1</a></li> 
<li id="left"><a href="#">Link2</a></li> 
<li id="center"><a href="#">Link3</a></li> 
<li id="center"><a href="#">Link4</a></li> 
<li id="center"><a href="#">Link5</a></li> 
<li id="right"><a href="#">Link6</a></li> 
</ul> 
<div style="clear: both;"></div>

CSS：

ul#menu { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    height: 20px; 
    list-style: none; 
    padding: 0; 
    background: #ff0000; 
} 
li { 
    display:inline;  
} 

#left { 
    padding: 0 5px 0 5px; 
    float: left;  
} 
#center { 
    padding: 0 5px 0 5px; 
    position: relative; 
    left: 25%; 
    /*position: absolute; 
    left: 50%;*/ 
} 
#right { 
    float: right; 
}

來源

2014-01-14 tacss

你可以這樣做：

首先拆下left申報中心元素：

#center { 
    padding: 0 5px 0 5px; 
    /*position: relative; 
    left: 25%; Remove this*/ 
}

然後用該中心的元素父：
```
ul#menu { 
text-align:center; 
} 
```

檢查在Demo

注 -_{您不能使用多個ID。 ID在你的標記無效的文件中必須是唯一的}

來源

2014-01-14 19:02:21 DaniP

豎起大拇指！作品美麗！非常感謝！ @AlienArrays;我可以看到工作，但有點雜亂。謝謝你。 – tacss

http://jsfiddle.net/DWLZG/1/

我加入這個

@media screen and (max-width: 380px) { 
    #right, #center { 
     float: left; 
     left: 0; 
    } 
}

它的工作原理幾乎完美，我認爲。你可能想要將380改成420左右。隨你喜歡。

來源

2014-01-14 18:56:21 CRABOLO

拆分菜單成3個部分[左，中，右]概工作

回答

相關問題