css图文混排问题#layout ul li{width: 80px;float: left;margin: 20px 0 0px 20px;display: inline
<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"><styletype="text/css">b...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0 auto;font-size: 12px;line-height: 2;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li{
width: 80px;float: left;margin: 20px 0 0px 20px;display: inline;text-align: center;
}
#layout ul li a{display: block;}
#layout ul li a img{padding: 1px; border: 1px solid #e1e1e1;margin-bottom:3px;}
}
#layout ul li a:hover img{
padding: 0px; border: 2px solid #f98510;
}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
为什么#layout ul li{
width: 80px;float: left;margin: 20px 0 0px 20px;display: inline;text-align: center;
}只能width只能设置80px,如果设置成100px;发现文字就不在图片下面了？？？？？？ 展开
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0 auto;font-size: 12px;line-height: 2;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li{
width: 80px;float: left;margin: 20px 0 0px 20px;display: inline;text-align: center;
}
#layout ul li a{display: block;}
#layout ul li a img{padding: 1px; border: 1px solid #e1e1e1;margin-bottom:3px;}
}
#layout ul li a:hover img{
padding: 0px; border: 2px solid #f98510;
}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
为什么#layout ul li{
width: 80px;float: left;margin: 20px 0 0px 20px;display: inline;text-align: center;
}只能width只能设置80px,如果设置成100px;发现文字就不在图片下面了？？？？？？ 展开
展开全部
下面图片高度固定为68，如果你设置li宽度100那么就多出32像素。
三亚这两个字不超过32像素，就排在一行。
要么在图片下面加个换行 要么把图片宽设为100%
三亚这两个字不超过32像素，就排在一行。
要么在图片下面加个换行 要么把图片宽设为100%
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
