在一个div里,列表样式图片进行float,实现水平排序

<div class="xiangce">
  <ul>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li>
    </ul></div>

这时一个div里面的列表图标链接样式,效果如下

a:用line-style:none,将无序列表样式前符号;总是忘记用哪个元素,line-style:noneline-style:noneline-style:noneline-style:noneline-style:none

b:在实现水平排列前,将a元素的文字部分置于图片的下方。

首先想到了用display设置成块级元素block,刚开始只设置了文字,并没有出现效果,于是将img也设置成block,然后就、、、好了、、、;通过text-align:center,让文字处于图片下方的中心;

c:最后对li设置float,让其靠左浮动float:left;

随后用margin调整在div的分布,现在只会在浏览器中,一边调一遍看,找到合适的位置,再回css中改数据、、、、

最终效果:

时间: 2024-08-02 19:01:36

在一个div里,列表样式图片进行float,实现水平排序的相关文章

在一个DIV里两边是文字块,中间是图片怎么样用最少的浮动来合理布局?

我们经常会遇到这样的情况,在一个容器里,我们可能需要中间展示图片而左右是文字块.那么我们如何用最少的浮动来达到这个效果呢? 因为img 是一个特殊元素,它不属于块元素也不属于内联元素.所以经过尝试,发现了以下办法. <div class=box> <img src="http://s0.hao123img.com/res/img/logo/logonew1.png" > <div> right胡凤莲家距县城几十公里,其中有一段山路没有班车,只能跪着行

实现div里的img图片水平垂直居中

<body> <div> <img src="1.jpg" alt="haha"> </div> </body> 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle. <style type="text/css"> *{margin: 0;padding: 0;} div{ w

DIV+CSS列表式布局(同意图片的应用)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!--gbk,gb2312 中文-->

js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

<!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-Typ

如何在一个div标签里显示出另一个网页? &lt;iframe src=&quot; http://www.baidu.com &quot; width=&quot;800px&quot; height=&quot;200px&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt; &lt;/iframe&gt;

如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

如何在导航栏添加hot样式图片

如何在导航栏添加hot样式图片:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在很多网站的导航栏中都有这样的效果,在一个比较热门的栏目上面会有一个动态的小图片用以标示此栏目比较热门或者是新增栏目等等,效果比较美观且人性化,下面就简单介绍一下如何实现此效果,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="autho

背景样式、列表样式、变形样式、过渡动画

背景样式 背景原点:background-origin : border-box(从border区域(含border)开始显示背景图像.) padding-box(从padding区域(含padding)开始显示背景图像.) content-box(从content区域开始显示背景图像.) <style type="text/css"> .box{ width: 250px; height: 250px; float: left; margin-left: 20px; pa

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&