在li中出现了在图片下方添加文字却不再图片下的背景框中,刚开始我的源码是这样的:
<!DOCTYPE html>
<html>
<head>
<title>boxtext.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./boxtest.css">
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="images/1.png"/><a href="#" class="words">独木舟</a></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/1.png"/></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/1.png"/></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/1.png"/></li>
<li><img src="images/2.png"/></li>
<li><img src="images/3.png"/></li>
<li><img src="images/3.png"/></li>
</ul>
</div>
</body>
</html>
test.css的代码为:
body{
margin:0px;
padding:0px;
}
/*div1 用于控制显示的位置*/
.div1{
width:500px;
height:300px;
border:1px solid blue;
margin-left: 100px;
margin-top: 20px;
}
/*用于显示图片位置的宽度和高度*/
.faceul{
width:400px;
height:200px;
border:1px solid yellow;
list-style-type: none;
padding:0;/*清楚默认的左边距*/
}
/*用于控制单个图片区域的图片大小*/
.faceul li{
width:50px;
height:65px;
border:1px solid black;
float:left;/*左浮动*/
margin-left: 15px;
margin-top: 15px;
}
.faceul a{
font-size: 12px;
margin-top: 0px;
}
.faceul img{
width:40px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 4px;
}
a:link
{
text-decoration: none;
color:black;
text-align: center;
}
a:hover{
text-decoration: underline;
color:blue;
}
在各种修改字体以及边距的情况下,我发现只要添加display:block;
使文字和图片为同一个快元素即可。css修改如下:
body{
margin:0px;
padding:0px;
}
/*div1 用于控制显示的位置*/
.div1{
width:500px;
height:300px;
border:1px solid blue;
margin-left: 100px;
margin-top: 20px;
}
/*用于显示图片位置的宽度和高度*/
.faceul{
width:400px;
height:200px;
border:1px solid yellow;
list-style-type: none;
padding:0;/*清楚默认的左边距*/
}
/*用于控制单个图片区域的图片大小*/
.faceul li{
width:50px;
height:65px;
border:1px solid black;
float:left;/*左浮动*/
margin-left: 15px;
margin-top: 15px;
}
.faceul a{
font-size: 12px;
margin-top: 0px;
}
.faceul img{
width:40px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 4px;
display: block;
}
a:link
{
text-decoration: none;
color:black;
display: block;
text-align: center;
}
a:hover{
text-decoration: underline;
color:blue;
}
分享到:
相关推荐
html li前添加图标,通过三种方法添加,第一种是:list-style-image,第二种是:background的方式实现,第三种:通过字体库引入图标
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
HTML li 标签.docx li 标签
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 for(i=0;i;i++) { arrayli[i].className=""; if(obj==arrayli[i]) { obj.className="test"; } } } </script>
在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。 解决方法: 复制代码代码如下: ul li{ white-space:nowrap; } ...
用jquery实现交叉合并2个ul标签!
将UL LI 放入 一个div或者其他容器中 给这个容器一个ID或者class 例如: <div id "news lis"> <ul> <li>< li> < ul> < div> 调用方法:$ "#news list"...
HTML li 标签.doc
在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:
直接解压把相关的样式,js及页面应用到相应的页面中。界面美观
UL+LI模拟selcet标签demo
ie6中li 插入图片后下方有空隙bug,这是 ie6 的有一个经典 bug,解决该 bug 有很多方法,今天我整理了下,共4种方法,给大家分享下
div ul li排列图片的样式 css + div
解决IE6 IE7 Firefox中li兼容问题
下面小编就为大家分享一篇jQuery动态添加li标签并添加属性和绑定事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
不使用li样式:list-style-type:none; 如果要定义为图片: 复制代码代码如下: li{ list-style: url(“pre.gif”) outside circle; } 改颜色 复制代码代码如下: li{ color:#f00; } 关于这个list-style-type的...
实例如下: $(function () { $('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : ""; }); // 隔6行 加空白。或者加虚线 $('.imglist li').after(function (i) { ...图片隔三行加虚线,最后一
jsp ul 下的li 标签循环滚动
js 获取元素下面所有的li var content=document....//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i<lis.length;i++){