HTML/CSS导航栏

-1

我是CSS和HTML的新手，但我真的很喜欢它，并且喜欢解决问题等等，但是我被困在这个我认为会很容易的东西上，但它不是。我似乎无法找到答案，所以我想知道你是否有答案。HTML/CSS导航栏

ul { 
 
\t list-style-type: none; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
li { 
 
\t display: inline; 
 
\t float: left; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 140px; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; \t 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css"> 
 
</head> 
 
<body> 
 
<div class="navbardiv"> 
 
<ul> 
 
<li><a href="Page1.html">Home</a></li> 
 
<li><a href="Page2.html">Forum</a></li> 
 
<li><a href="Page3.html">Videos</a></li> 
 
<li><a href="Page4.html">Contact</a></li> 
 
</ul> 
 
</div > 
 
</body> 
 
</html>

编辑：我才意识到，我甚至没有问我的问题。我想知道的是如何将ul集中在div中。

来源

2014-12-03 azy19

有什么问题吗？你被卡住的事情是什么？ – 2014-12-03 07:58:53

你可以做到以下几点：

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    text-align: center; /* This does the trick */ 
} 

ul li { 
    display: inline-block; /* Get rid of the float */ 
}

来源

2014-12-03 08:32:53 Stephan

尝试使用此。

ul { 
 
     text-align: center; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
li { 
 
\t display: inline; 
 
\t list-style: none; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 140px; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; \t 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
} 
 

 
a:link,a:visited 
 
{ 
 
    display:inline-block; 
 
}

来源

2014-12-03 08:36:45 Ind

工业的答案是好的，但这里的另一种可能性。这取决于你脑子里想什么你的导航栏... 结果：http://jsfiddle.net/2nambm6g/1/

ul { 
list-style-type: none; 
margin: 0 auto; 
padding: 0; 
} 

li { 
width:25%; 
display: inline; 
float: left; 
text-align:center; 

} 

a { 
display: block; 
font-size: 32px; 
width: 140px; 
background-color: #A0A0A0; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 

} 

.navbardiv { 
margin: 0px; 
background-color: #A0A0A0; 
height: 50px; 
}

来源

2014-12-03 08:42:59 Stan

HTML/CSS导航栏

回答

相关问题