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

这就是你想要的吗？

小提琴：http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

小提琴：http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/

如何自定义滚动导航栏？

1 个答案: