让ul在div里水平居中
.d01ul01lia{display:block}.d01{background:#FFCCCC;padding:5px;margin:0auto;width:500p...
.d01 ul01 li a {display:block}
.d01{
background:#FFCCCC;
padding:5px;
margin:0 auto;
width:500px;
}
.ul01 {padding:0;
margin:0 auto;}
.ul01 li{
list-style-type:none;
float:left;
border:#66C 2px solid;
margin:0 -2 0 0;
padding:2px 5px;
text-align:center;
background:#FF9;
}
.ul01 li a{
text-decoration:none;
color:#F63;
}
.ul01 li a:hover{
color:#6CF;
}
.ul01 li a:active{
color:#669900;
}
#kara {
border:0;
margin:0;
padding:0;
clear:both;
}
</style>
</head>
<body>
<div class="d01">
<ul class="ul01">
<li><a href="#">Homepage</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Graphic</a></li>
</ul>
<div id="kara"></div>
</div>
=====
据说将ul设宽度再margin:0 auto;可以居中，但这是横排的导航条，ul一设宽度就变打竖了。请问有什么方法可以让它居中?
顺便问下怎样使鼠标移到黄色框里开始链接模式，而不是移到文字才出现链接？ 展开
.d01{
background:#FFCCCC;
padding:5px;
margin:0 auto;
width:500px;
}
.ul01 {padding:0;
margin:0 auto;}
.ul01 li{
list-style-type:none;
float:left;
border:#66C 2px solid;
margin:0 -2 0 0;
padding:2px 5px;
text-align:center;
background:#FF9;
}
.ul01 li a{
text-decoration:none;
color:#F63;
}
.ul01 li a:hover{
color:#6CF;
}
.ul01 li a:active{
color:#669900;
}
#kara {
border:0;
margin:0;
padding:0;
clear:both;
}
</style>
</head>
<body>
<div class="d01">
<ul class="ul01">
<li><a href="#">Homepage</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Graphic</a></li>
</ul>
<div id="kara"></div>
</div>
=====
据说将ul设宽度再margin:0 auto;可以居中，但这是横排的导航条，ul一设宽度就变打竖了。请问有什么方法可以让它居中?
顺便问下怎样使鼠标移到黄色框里开始链接模式，而不是移到文字才出现链接？ 展开
3个回答
展开全部
代码：
效果：
代码含义：
text-align:center 属性规定元素中的文本的水平对齐方式。
代码源件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body,div,ul{padding:0px;margin: 0px;}
</style>
</head>
<body>
<div style="width:400px;height:100px; background: #eee; text-align: center; text-align: -webkit-center;">
<ul style="width: 50px; height: 100px; background: #ccc;">
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>ul{float:left;}li{float:left}</style> 一句搞定
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>无标题文档</title>
<style type="text/css">
.d01 ul01 li a
{
display: block;
}
.d01
{
background: #FFCCCC;
padding: 5px;
margin: 0 auto;
width: 500px;
}
.ul01
{
padding: 0;
margin: 0 auto;
text-align:center;
}
.ul01 li
{
list-style-type: none;
display:inline;
border: #66C 2px solid;
margin: 0 -2 0 0;
padding: 2px 5px;
text-align: center;
background: #FF9;
}
.ul01 li a
{
text-decoration: none;
color: #F63;
}
.ul01 li a:hover
{
color: #6CF;
}
.ul01 li a:active
{
color: #669900;
}
#kara
{
border: 0;
margin: 0;
padding: 0;
clear: both;
}
</style>
</head>
<body>
<div class="d01">
<ul class="ul01">
<li><a href="#">Homepage</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Graphic</a></li>
</ul>
<div id="kara">
</div>
</div>
</body>
</html>
具体查看我的博客
http://hi.baidu.com/sueris%5Fsoft/blog/item/bc0222d4374a210f485403aa.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>无标题文档</title>
<style type="text/css">
.d01 ul01 li a
{
display: block;
}
.d01
{
background: #FFCCCC;
padding: 5px;
margin: 0 auto;
width: 500px;
}
.ul01
{
padding: 0;
margin: 0 auto;
text-align:center;
}
.ul01 li
{
list-style-type: none;
display:inline;
border: #66C 2px solid;
margin: 0 -2 0 0;
padding: 2px 5px;
text-align: center;
background: #FF9;
}
.ul01 li a
{
text-decoration: none;
color: #F63;
}
.ul01 li a:hover
{
color: #6CF;
}
.ul01 li a:active
{
color: #669900;
}
#kara
{
border: 0;
margin: 0;
padding: 0;
clear: both;
}
</style>
</head>
<body>
<div class="d01">
<ul class="ul01">
<li><a href="#">Homepage</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Graphic</a></li>
</ul>
<div id="kara">
</div>
</div>
</body>
</html>
具体查看我的博客
http://hi.baidu.com/sueris%5Fsoft/blog/item/bc0222d4374a210f485403aa.html
追问
谢谢，不过li设成inline之后在li或者a里设width和padding都不起作用了，按钮缩成一小块排着弄不到之前的形状……
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
