对于我的网站 (www.heretoedit.com),我想移动导航栏中的文本,以便“关于”按钮与我网站的其余文本对齐,但“联系”按钮保持不变。另外,当屏幕尺寸变小时,我想阻止“extras”和“contact”按钮的文本向下移动。
下面是我的导航栏代码,任何帮助将不胜感激。谢谢。
#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;
}
最佳答案
#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 */
}
关于css - 如何修复我的导航栏文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18604502/