html - 如何自定义滚动导航栏？

Question

我目前有一个在我滚动时保持相对的导航栏；我想要做的是让栏从左到右跨越整个顶部(响应不同的屏幕)，两边都没有间隙。此外，当我将光标移到栏上或单击其中一个链接时，它开始从右向左缩小，缩小到原始大小的一半左右。

这是我当前导航栏的屏幕截图:http://prntscr.com/5x02ef

这是我的 HTML:

  <div id="header">
        <div id="navbar">
            <ul>
                <li>
                    <a href="#About Me">Me</a>
                </li>
                <li>
                    <a href="#Work">Work</a>
                </li>
                <li>
                    <a href="#Contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>   

这是我的 CSS 代码:

#header {
position: relative;
}

#navbar {
    text-align: center;
    text-decoration: none;
    position: fixed;
    top: 10px;
    margin-top:1.2%;
}

ul {
    position: fixed;
    margin: 0px;
    height: auto;
}

li {
    display: inline;
    border: 2px solid rgb(73, 73, 73);
    border-left: none;
    border-right: none;
    border-top:none;
    padding-top: 1.562em;
    padding-bottom: 1.562em;
    padding-left:14%;
    padding-right:14%;
    background-color: #FFFFFF;       
}

Answer 1

这是你想要的吗？

fiddle :http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/

#navbar {
    text-align: center;
    text-decoration: none;
}
body{
    text-align:center;
}
#header {
    position: relative;
    text-align:center;
}
ul {
    
    height: auto;
}
li {
    display: inline-block;
    border: 2px solid rgb(73, 73, 73);
    padding-top: 1.562em;
    padding-bottom: 1.562em;
    padding-left: 6.25em;
    padding-right: 6.25em;
    border-radius: 5px 5px;
    background-color: #FFFFFF;
}

<div id="header">
    <div id="navbar">
        <ul>
            <li><a href="#About Me">Me</a>

            </li>
            <li><a href="#Work">Work</a>

            </li>
            <li><a href="#Contact">Contact</a>

            </li>
        </ul>
    </div>
</div>

fiddle :http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/