拆分菜单成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个部分[左，中，右]概工作

回答

相关问题