让ul在div里水平居中

.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一设宽度就变打竖了。请问有什么方法可以让它居中?
顺便问下怎样使鼠标移到黄色框里开始链接模式，而不是移到文字才出现链接？

举报该文章

相关建议 2017-08-30

代码：

效果：

代码含义：

text-align:center 属性规定元素中的文本的水平对齐方式。

代码源件：

<!DOCTYPE html>

<html>

<head>

<style>

body,div,ul{padding:0px;margin: 0px;}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/8sq88q4vs.html

其他看法

第1个回答 2012-03-01

第2个回答推荐于2016-10-16

<!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追问

谢谢，不过li设成inline之后在li或者a里设width和padding都不起作用了，按钮缩成一小块排着弄不到之前的形状……

本回答被提问者采纳

相似回答

如何设置ul标签居中显示?答：3、在test.html文件内，设置div的class为mydiv，主要用于设置div的css样式。4、在css标签内，通过class设置div的宽度为300px，高度为200px，背景颜色为灰色。5、在test.html文件内，再设置无序列表ul的样式，使用width属性设置其宽度为100px，同时使用margin属性设置其居中显示。6、在浏览器打开test.ht...

大家正在搜

让div水平居中让div水平垂直居中 div 水平居中 div水平居中的方法 div垂直水平居中 cssdiv层水平居中 div水平垂直居中的方法怎么让div居中让div居中