Html 如何使水平导航菜单居中,而不拆分每个链接
我一直在拼命地尝试让导航菜单居中,但我就是做不到。 我试过显示内联块文本对齐中心和其他东西,但它不会工作,当我试图使其帮助将是gr8tHtml 如何使水平导航菜单居中,而不拆分每个链接,html,css,alignment,stylesheet,navbar,Html,Css,Alignment,Stylesheet,Navbar,我一直在拼命地尝试让导航菜单居中,但我就是做不到。 我试过显示内联块文本对齐中心和其他东西,但它不会工作,当我试图使其帮助将是gr8t <html> <style> * { margin: 0px; padding: 0px; } body { font-family: verdana; background-color: #FFF; padding: 50px; } h1 { text-align: c
<html>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-color: #FFF;
padding: 50px;
}
h1 {
text-align: center;
margin-bottom: 50px;
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
}
ul#navmenu li {
width: 96.6px;
text-align: center;
position: relative;
margin-right: 0px;
float: left;
}
#navmenu ul {
display: inline-block;
list-style-type: none;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 96.6px;
height: 25px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
margin-top: 0px;
}
ul#navmenu .sub2 a {
margin-left: 0px;
}
ul#navmenu li:hover > a {
background-color: grey;
}
ul#navmenu li:hover a:hover {
background-color: red;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 97.6px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 11pt;
position: absolute;
top: 5px;
right: 4px;
}
#navmenu {
display: inline-block;
text-align: center;
list-style-type: none;
margin: 0px auto;
padding: 0px;
position: relative;
}
.rarrow {
font-size: 13pt;
position: absolute;
top: 6px;
right: 4px;
}
#page1 .link1{
color: grey;
border-top: 2px solid red;
}
#page2 .link2{
color: grey;
border-top: 2px solid red;
}
#page3 .link3{
color: grey;
border-top: 2px solid red;
}
</style>
</head>
<body>
<h1> Tom's Navigation Menu</h1>
<div id="page1">
<ul id="navmenu">
<li><a href="dropdown1.html" class="link1">hyperlink 1</a></li>
<li><a href="dropdown2.html" class="link2">hyperlink 2</a><font color="white">
<span class="darrow">▼</font></span>
<ul class="sub1">
<li><a href="#">hyperlink 2.1</a></li>
<li><a href="#">hyperlink 2.2</a></li>
<li><a href="#">hyperlink 2.3</a></li>
</ul>
</li>
<li><a href="#">hyperlink 3</a></li>
<li><a href="#">hyperlink 4</a><span class="darrow"><font color="white">▼
</font></span>
<ul class="sub1">
<li><a href="#">hyperlink 4.1</a></li>
<li><a href="#">hyperlink 4.2</a></li>
<li><a href="#">hyperlink 4.3</a><span class="rarrow">
<font color="white">▶</font></span>
<ul class="sub2">
<li><a href="#">hyperlink 4.3.1</a></li>
<li><a href="#">hyperlink 4.3.2</a></li>
<li>
<a href="dropdown3.html" class="link3">hyperlink 4.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">hyperlink 5</a></li>
</ul></div>
</body>
</html>
* {
边际:0px;
填充:0px;
}
身体{
字体系列:verdana;
背景色:#FFF;
填充:50px;
}
h1{
文本对齐:居中;
边缘底部:50px;
}
ul#导航菜单,ul.sub1,ul.sub2{
列表样式类型:无;
字号:9pt;
}
ul#navmenu li{
宽度:96.6px;
文本对齐:居中;
位置:相对位置;
右边距:0px;
浮动:左;
}
#导航菜单{
显示:内联块;
列表样式类型:无;
}
ul#nava菜单{
文字装饰:无;
显示:块;
宽度:96.6px;
高度:25px;
线高:25px;
背景色:#2e;
边框:1px实心#777777;
边框顶部:2个实心#777777;
颜色:白色;
字体系列:Arial,无衬线;
字体大小:粗体;
字体:Arial;
浮动:左;
文本对齐:居中;
}
ul#navmenu.sub1 li{
}
ul#navmenu.sub1 a{
边际上限:0px;
}
ul#navmenu.sub2 a{
左边距:0px;
}
ul#navmenu li:悬停>a{
背景颜色:灰色;
}
ul#navmenu li:悬停a:悬停{
背景色:红色;
}
ul#导航菜单ul.sub1{
显示:无;
位置:绝对位置;
顶部:26px;
左:0px;
}
ul#导航菜单ul.sub2{
显示:无;
位置:绝对位置;
顶部:0px;
左:97.6px;
}
ul#navmenu li:悬停。sub1{
显示:块;
}
ul#navmenu.sub1 li:悬停。sub2{
显示:块;
}
达罗先生{
字号:11pt;
位置:绝对位置;
顶部:5px;
右:4px;
}
#导航菜单{
显示:内联块;
文本对齐:居中;
列表样式类型:无;
保证金:0px自动;
填充:0px;
位置:相对位置;
}
拉罗先生{
字号:13pt;
位置:绝对位置;
顶部:6px;
右:4px;
}
#第1页链接1{
颜色:灰色;
边框顶部:2件纯红;
}
#第2页链接2{
颜色:灰色;
边框顶部:2件纯红;
}
#第3页链接3{
颜色:灰色;
边框顶部:2件纯红;
}
汤姆的导航菜单
-
▼
- ▼;
-
▶
-
尝试将此行添加到CSS中:
#page1 {text-align:center;}
我们正在做的是将#navmenu
的父元素(即#page1
)设置为文本对齐:居中代码>
请参阅此JSFIDLE:尝试以下操作:
CSS
ul#navmenu li {
/* width: 96.6px; */
display: table-cell;
text-align: center;
position: relative;
/* margin-right: 0px; */
/* float: left;*/
}
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
width: 100%;
display: table;
}
#navmenu {
display: inline-block;
text-align: center;
list-style-type: none;
margin: 0px auto;
padding: 0px;
position: relative;
}
ul#navmenu a{
text-decoration: none;
display: block;
/* width: 96.6px; */
height: 25px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
/* float: left; */
text-align: center;
}