当前位置：首页 - 正文

让ul在div里水平居中

发布网友发布时间：2022-04-24 22:13

我来回答

共3个回答

热心网友时间：2023-10-12 23:06

代码：

效果：

代码含义：

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

代码源件：

<!DOCTYPE html>

<html>

<head>

<style>

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

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

热心网友时间：2023-10-12 23:07

热心网友时间：2023-10-12 23:07

<!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都不起作用了，按钮缩成一小块排着弄不到之前的形状……

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

让ul在div里水平居中

最新推荐

猜你喜欢

热门推荐