如何在UL列表里调节<a>的宽度和高度？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="Dreamweaver CS5"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<title>无标题文档</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul{
list-style:none;
}
ul li{
float:left;
width:150px;
line-height:50px;
border:1px solid red;
}
a{
width:150px;
height:50px;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">yanneng</a></li>
<li><a href="#">lijialian</a></li>
<li><a href="#">lele</a></li>
</ul>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="Dreamweaver CS5"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<title>无标题文档</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul{
list-style:none;
}
ul li{
float:left;
width:150px;
line-height:50px;
border:1px solid red;
}
a{
width:150px;
height:50px;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">yanneng</a></li>
<li><a href="#">lijialian</a></li>
<li><a href="#">lele</a></li>
</ul>
</body>
</html> 展开
2个回答
展开全部
lz 我把你的文字居中显示代码是：
ul{ text-align:center;
list-style:none;
margin:0px;
padding:0px; //注意最后2句，我把它本身默认的外边距和内边距设为0px,也就是删除它的设置，有时候在设置时没删除会影响其效果的，一般是删除后根据需求在重新设置的，
}
要调节<a>的宽度和高度，其实只要设置它的padding属性，意思是那里面的内容撑大，代码是：
a{
border:1px solid red;
padding:10px;
}
以上个人的理解，希望楼下有更好的解答。
ul{ text-align:center;
list-style:none;
margin:0px;
padding:0px; //注意最后2句，我把它本身默认的外边距和内边距设为0px,也就是删除它的设置，有时候在设置时没删除会影响其效果的，一般是删除后根据需求在重新设置的，
}
要调节<a>的宽度和高度，其实只要设置它的padding属性，意思是那里面的内容撑大，代码是：
a{
border:1px solid red;
padding:10px;
}
以上个人的理解，希望楼下有更好的解答。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
a标签默认情况下是只包含文字的，就是说不管你a标签设宽高多少，它都只包出标签内的文字，这点你用a标签加个背景色就可以看出来。如果a标签要设宽高有两种办法：
1.让a标签模块化，就是加个display:block的属性，这个时候就可以设宽高，但是要注意这时候a标签已经是一个类似div的模块了，就是说你直接写一排<a href="#"></a><a href="#"></a><a href="#"></a>它会分行显示，不会平行布局，不管你的宽度是多少，如果平行布局还要加float属性才可以了。
2.比较简单就是a标签里面加个div，设div的宽高，但是这种方法会使a:hover效果失效，兼容性也会有问题
1.让a标签模块化，就是加个display:block的属性，这个时候就可以设宽高，但是要注意这时候a标签已经是一个类似div的模块了，就是说你直接写一排<a href="#"></a><a href="#"></a><a href="#"></a>它会分行显示，不会平行布局，不管你的宽度是多少，如果平行布局还要加float属性才可以了。
2.比较简单就是a标签里面加个div，设div的宽高，但是这种方法会使a:hover效果失效，兼容性也会有问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
