Question

我正在设计一个响应式菜单，我有四个元素，分别位于左侧，一个位于右侧。现在，问题是我不知道如何定位正确的，以便它具有响应性，当我调整窗口大小时它保持静止（如在https://teamtreehouse.com中）。

html如下：

<nav id="menu">
  <nav id="menucenter">
    <ul>
      <li><a href="index.html">Quién soy?</a></li>
      <li><a href="index.html">Creatividad</a></li>
      <li><a href="secondarypages/schedule.html">Acción</a></li>
      <li><a href="secondarypages/places.html">Servicio</a></li>
      <li><a href="secondarypages/places.html">Servicio</a></li> <- element I want on the right side
    </ul>
  </nav>
</nav>

css是：

#menu {
    padding: 5px;
    background-color: rgb(50,50,50);
}

#menucenter {
    padding: 10px;
    padding-bottom: 0px;
    position: relative;
}
#menucenter ul {
    list-style-type: none;
    margin:0px;
    padding: 5px;
    overflow: scroll;
    background-color: rgb(50,50,50);
}

#menucenter li {
    float: left;
    padding-bottom:6px;

}
#menucenter li.highlight{
    top:42px;
    border-bottom:solid 3px #5CF1B3;
    border-radius: 2px;
    position: absolute;
}

#menucenter li a {
    display: inline;
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    background-color: rgb(50,50,50);
    border-bottom:solid 1px #00b3b3;
}

提前谢谢！

Answer 1

添加

position: absolute;
top: 15px;
right: 15px;

到最后一个。根据您的需要调整顶部和右侧。这是一个例子：https://jsfiddle.net/8r74y2vz/。希望能回答你问。

Answer 2

因此您对此有多种解决方案。

我的偏好是flexbox（用flexbox回答的类似问题之一：How to Right-align flex item?） Flexbox浏览器支持：https://caniuse.com/#feat=flexbox

但是，如果您需要支持较旧的浏览器，则可以使用float：right;。但要记得清除浮标。

HTML菜单定位

2 个答案: