HTML菜單定位

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/。希望你回答Q.