Question

我有一个菜单，我已分成3个不同的部分。但是，在将浏览器缩放到较小尺寸时，它的工作正常，位于中心的链接无法充分扩展。

如果您尝试将浏览器的大小调整为较小，您可以看到RIGHT-most和CENTER链接在LEFT上的链接之前发生碰撞（LEFT和CENTER之间存在很大差距）。如果我将中心div css设置为“绝对/左：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;
}

Answer 1

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

我添加了这个

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

我觉得它完美无缺。您可能想要将380更改为大约420左右。无论你喜欢什么。

Answer 2

你可以这样做：

首先删除中心元素的left声明：

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

然后将您的元素放在父元素中心：
```
ul#menu {
 text-align:center;
}
```

检查 Demo

注意 - _{您不能使用多个ID。在您的标记无效的文档中，ID必须是唯一的}

将菜单拆分为3个部分[左，中，下]右] ALMOST工作

2 个答案: