Question

对于我的网站（www.heretoedit.com），我想在导航栏中移动文本，以便“关于”按钮与我网站的其余部分文本对齐，但“联系人”按钮保持不变。另外，我希望在屏幕尺寸缩小时停止向下移动“额外”和“联系”按钮的文本。

以下是我的导航栏代码，非常感谢任何帮助。感谢。

#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;   
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
} 

#navbar ul {
list-style:none;
display:inline-block;    
margin-left: 130px;
margin-top: 25px;
}

#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}

#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}

#navbar a:hover {
color: black;
text-decoration: none;
}

#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}

Answer 1

#navbar ul {

    list-style: none;
    display: inline-block;

    /* Add these */
    margin: 25px 0px;
    padding: 0;
    width: 100%;
    text-align: center;

}
#navbar li {

    /* float: left; // Remove this */
    padding: 0 9px;
    text-align: center;
    left: 0px;
    display: inline-block; /* Add this */

}

如何修复导航栏文字？

1 个答案: