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

<div class="xiangce"><ul>
    <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
    <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="images/pic4.gif" alt="">产品名称</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中改数据、、、、

最终效果:

 

转载于:https://www.cnblogs.com/xiandong/p/7608999.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

The listener supports no services

$ lsnrctl start 报错提示: The listener supports no services The command completed successfully 如图所示&#xff1a; 这样启动后远程连接会报错&#xff1a; oracle ORA-12514:TNS:listener does not currently know of service requested in connect descriptor 问题原…

SEO【总结】by 2019年5月

2019独角兽企业重金招聘Python工程师标准>>> 关键点&#xff1a; 1、代码 1.1、seo前端代码&#xff1a;基于Html代码的SEOherf&#xff1a;https://my.oschina.net/u/2862573/blog/3030664 注意的要点&#xff1a; h1&#xff0c;h2的内容很关键 网页的压缩、静态化…

Oracle数据库 查看表是否是 索引组织表的方法

1. 最近在工作过程中发现 一个表插入很慢 以为是索引组织表, 所以一直有点纠结 但是发现 产品里面是没有IOT的 于是找了下公司的OCP 问了下 如何查看 就是 user_tables 视图里面的一个字段. 见图: 转载于:https://www.cnblogs.com/jinanxiaolaohu/p/9018037.html

Windows server 2016 搭建RDS服务

计算机的更新换代太快&#xff0c;新购置的计算机没几年便觉得运行速度越来越慢&#xff0c;尤其是在运行一些比较大的应用程序是&#xff0c;用户总是抱怨运行速度太慢或者总是死机等问题。如果要更换新的计算机&#xff0c;又得不到领导的批准&#xff0c;因此对于企业来说&a…

springboot2.0 多数据源整合问题 At least one JPA metamodel must be present!   at

2019独角兽企业重金招聘Python工程师标准>>> 数据源代码&#xff1a; 第一个读取配置文件代码&#xff1a; package com.datasource;import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionFactoryBean; import org.mybatis.sp…

docker实战系列之搭建rabbitmq

1.搜索镜像【注&#xff1a;因为我这里采用的是阿里云镜像加速器,所以我直接在阿里云中搜索相关镜像路径】,点击"详情"查看公网拉取路径 2.拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/jc/rabbitmq-3 3.查看拉取的镜像 docker images 4.创建并运行容器【…

计算机基础知识--编码知识

编码回顾 编码转换 Python的bytes类型 编码回顾 在备编码相关的课件时&#xff0c;在知乎上看到一段关于Python编码的回答 这哥们的这段话说的太对了&#xff0c;搞Python不把编码彻底搞明白&#xff0c;总有一天它会猝不及防坑你一把。 不过感觉这哥们的答案并没把编码问题写明…

Linux——安装FTP服务器

1、检查安装vsftpd软件 使用如下命令#rpm -qa |grep vsftpd可以检测出是否安装了vsftpd软件&#xff0c; 如果没有安装&#xff0c;使用YUM命令进行安装。 2、启动服务 使用vsftpd软件&#xff0c;主要包括如下几个命令&#xff1a; 启动ftp命令#service vsftpd start 停止ftp…

测试开发面试准备之Selenium 工作原理

Selenium 经历了两个版本&#xff0c;Selenium 1.0 和 Selenium 2.0&#xff0c;本文仅介绍Selenium2的原理&#xff0c;在Selenium 2.0 主推的是WebDriver,Selenium2又名Selenium Webdriver。 Selenium2简介 Selenium是一个用于Web应用程序测试的工具&#xff0c;支持多平台、…

JavaScript快速入门-ECMAScript本地对象(String)

一、String对象 String对象和python中的字符串一样&#xff0c;也有很多方法&#xff0c;这些方法大概分为以下种类&#xff1a; 1、索引和查找 1、charAt() 返回指定位置的字符。 2、charCodeAt() 返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 …

ZOJ4116 Game on a Graph

给一个含n个点 m条边的连通图 把k个人分成两组 轮流拿掉一条边 当取走一条边后图不再连通 这个队就输了 水题啦 边为n-1时 下一个拿掉边的那个组就输啦 AC代码&#xff1a; 1 #include<bits/stdc.h>2 using namespace std;3 typedef long long ll;4 typedef unsigned lon…

集美大学1414班软件工程个人作业2——个人作业2:APP案例分析

一、作业链接 个人作业2&#xff1a;APP案例分析 二、博文要求 通过分析你选中的产品&#xff0c;结合阅读《构建之法》&#xff0c;写一篇随笔&#xff0c;包含下述三个环节的所有要求。 第一部分 调研&#xff0c; 评测 下载软件并使用起来&#xff0c;描述最简单直观的个人第…

回溯算法 ------回溯算法的几个例子

1.回溯算法的小结 2.回溯算法的几个例子 2.1 ------ 4后问题 搜索空间&#xff1a; 2.2 ------01背包问题 01背包问题的算法设计 01背包问题的实例分析 01背包问题的搜索空间 2.3 ------- 货郎问题 货郎问题实例 货郎问题的搜索空间 最后再来个小结 转载于:https://www.cnb…

JAVA_出神入化学习路线大纲

注&#xff1a;参考GitHub上的项目&#xff08;toBeTopJavaer&#xff09;总结出来 也是自己的目标。 基础篇&#xff1a;https://www.cnblogs.com/blogzcc/p/10899066.html 进阶篇&#xff1a;https://www.cnblogs.com/blogzcc/p/10899841.html 高级篇&#xff1a;https://www…

Ubuntu安装并使用sogou输入法

1.下载搜狗输入法的安装包 下载地址为&#xff1a;http://pinyin.sogou.com/linux/ ,如下图&#xff0c;要选择与自己系统位数一致的安装包&#xff0c;我的系统是64位&#xff0c;所以我下载64位的安装包 2.按键CtrAltT打开终端&#xff0c;输入以下命令切换到下载文件夹: [ht…

面試題之web

1. django和flask框架的区别&#xff1f; django&#xff1a;大而全的全的框架&#xff0c;重武器&#xff1b;内置很多组件&#xff1a;ORM、admin、Form、ModelForm、中间件、信号、缓存、csrf等 flask: 微型框架、可扩展强&#xff0c;如果开发简单程序使用flask比较快速&am…

Ajax异步(客户端测试)

客户端测试&#xff1a;GET方法实现Ajax异步 var request new XMLHttpRequest(); request.open("GET","sever.php?number" document.getElementById("keyword").value); request.send(); request.onreadystatechange function(){ if(request.…

VS 添加文件添加文件成链接

转载于:https://www.cnblogs.com/wsxkit/p/10907585.html

设计模式——3.观察者模式

观察者模式&#xff08;Observer&#xff09; 观察者模式&#xff08;Observer&#xff09;简介&#xff1a; 定义一个一对多的依赖关系&#xff0c;让多个观察者对象监听某个主题对象&#xff0c;当主题对象的状态发生改变时&#xff0c;主题对象则通知所有的观察者对象&#…

Android 长按照片保存 工具类

2019独角兽企业重金招聘Python工程师标准>>> public class ImgUtils {public static void saveImageToGallery(Context context, Bitmap bmp) {final String[] items new String[] { "保存图片"};//图片转成Bitmap数组final Bitmap[] bitmap new Bitmap…