在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"&...
在 XHTML 1.0 Strict DTD 中，li 元素的 "type" 和 "value" 属性是不被支持的。 属性 ----- li 标签支持以下属性： * type：规定使用哪种项目符号。可以取值为 "A"、"a"、"I"、"i"、"1"、"disc"、"square"、...
在"弹出框li标签"的场景中，可能是将li元素作为弹出框内容的一部分，或者在列表项上触发弹出框的显示。 "弹出框js"标签提示我们这个压缩包可能包含了一些JavaScript代码，用于实现弹出框的功能。JavaScript是网页...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于如何使用jQuery实现两个`<ul>`列表（无序列表）的交叉合并。`<ul>`标签通常用于创建无序的项目列表，...
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 for(i=0;i;i++) { arrayli[i].className=""; if(obj==arrayli[i]) { obj.className="test"; } } } </script>
在`jsp`页面中，我们经常会遇到需要实现元素动态效果的需求，例如`ul`（无序列表）下的`li`（列表项）标签进行循环滚动。这种效果可以增强用户界面的交互性和吸引力，常见于新闻滚动、公告栏或者菜单导航等场景。 ...
在网页布局中，我们经常会遇到将`<img>`标签放入`<li>`列表项中进行展示，例如创建一个图片轮播、产品展示等效果。然而，一个常见的问题就是当...通过合理的CSS样式设置，我们可以确保图片在页面中整洁、无间隙地排列。
在使用UL和LI显示文字的时候，由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行，造成显示问题。 解决方法： 复制代码代码如下: ul li{ white-space:nowrap; } ...
在这个例子中，`<ul>` 创建了一个无序列表，而`<li>` 标签定义了列表中的三个项目。 **有序列表与无序列表** 无序列表 `<ul>` 使用默认的项目符号（通常是圆点），而有序列表 `<ol>` 则按照特定顺序（默认为数字）...
将UL LI 放入 一个div或者其他容器中 给这个容器一个ID或者class 例如: <div id "news lis"> <ul> <li>< li> < ul> < div> 调用方法：$ "#news list"...
在本场景中，我们要讨论的是如何使用CSS（Cascading Style Sheets）来对`div`内的`ul`和`li`元素进行样式设置，特别是将图片以特定方式排列。`div`常作为容器，`ul`和`li`则常用于创建无序列表，这里可能是指将一...
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
在网页设计中，有时我们可能需要模拟传统的HTML `<select>` 标签，但又希望具有更高的自定义性和灵活性。这就是“UL+LI模拟selcet标签”方法的用途。这种方法利用了HTML的无序列表`<ul>`和列表项`<li>`元素，通过CSS...
1. **解决IE5下`<li>`元素间距问题**：若`<li>`元素设置了固定宽度，则需在该元素的CSS定义中添加`vertical-align: bottom;`属性。 2. **宽度定义位置**：避免直接在`<ul>`元素中定义宽度，最好在`<li>`元素或外部...
在本文中，我们将深入探讨如何使用jQuery来动态地添加`li`标签，并向这些标签添加属性以及绑定事件。首先，让我们解析一下标题和描述中提到的关键知识点。 **jQuery动态添加li标签** 在jQuery中，我们可以使用`...
其中之一就是`:hover`伪类的选择器问题——在IE6中，`:hover`仅适用于`<a>`标签，而不能应用于`<li>`等其他元素。这使得使用`:hover`来实现交互式菜单或其他动态效果变得复杂。 #### 解决方案一：利用HTC文件 一种...
在IE6浏览器中，开发者经常会遇到一个经典的布局问题，即在`<li>`元素中插入图片后，图片下方会出现不必要的空隙。这个问题是由于IE6对列表项和内联元素的渲染方式存在一个已知的bug。在其他现代浏览器中，这个bug...
在网页设计中，列表（List）是展示信息的常见方式，尤其在HTML中，`<ul>` 和 `<ol>` 标签被广泛用于无序列表和有序列表的创建。然而，仅仅使用默认样式往往不能满足现代网页的视觉需求，这时就需要对列表进行美化，...