html图片和文字不贴着

ul中的每一个li如果里面添加“一个图，一行字”，

这样图片会紧贴在左侧，而文字会居中，这两个元素不会紧贴着。

产生这种问题的原因我推测是：我图片设置了左浮动，但文字没有设置浮动，而一旦将文字设置为浮动后又会破坏div的布局（文字会往左挤），所以解决办法是将文字设为左浮动的同时，将文字所属的容器设置为overflow:hidden

（这个方法对div也适用（即：将li换成div也会有这种问题））

解决办法是：

将li设置为overflow:hidden;

将里面的包围文字的a标签设置为：float:left;

时间： 2024-10-24 11:42:09

html图片和文字不贴着的相关文章

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

XenApp/XenDesktop 7.11中对于视频、图片、文字的优化的说明

在桌面虚拟化这个技术门类中,市面上一共主流有以下几种协议: Citrix的ICA/HDX协议 Teradici公司的PCoIP(VMware Horzion中主要使用的协议之一) 微软公司的RDP RedHat公司的spice 以及近两年我们能接触到的 VMware公司的Blast(VMware在Horizion 6版本以后开始提供的协议,有逐步替代PCoIP的趋势) 华为的HDP 但是无论怎么墙头变换大王旗,Citrix的ICA/HDX协议可以说多年来一直都是行业最为优秀的企业级远程交付协议.

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

按钮的上图片下文字排版

self.rechargeButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;//使图片和文字水平居中显示 [self.rechargeButton setTitleEdgeInsets:UIEdgeInsetsMake(self.rechargeButton.imageView.frame.size.height+10 ,-self.rechargeButton.imageView.fram

div+css（ul li）实现图片上文字下列表布局

css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; width:536px; overflow:hidden}使用margin:0 auto,让ul结构布局居中:使用overflow:hidden,因为ul的子级使用float属性会产生浮动,所以使用清除子级使用float对父级产生不能撑开问题:使用宽度width:536px;固定宽度让子级li准确一排只排

ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案

原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页上显示的时候,原先的文字总有倾斜的现象,如何解决? 图一.配准后有文字倾斜现象的地图解决方案如下: <esri:Map x:Name="myMap" IsLogoVisible="False" ZoomDuration="0:00:01" E

php给图片加文字

在图片上加文字是论坛,博客,新闻网站上最喜欢用的功能,防止盗图.这里看看代码是如何实现的. 首先还是upload_image.php这个文件,注意这里的caption文本框中输入的内容最终会写到图片上面 <?php //修改图片效果 $db = mysql_connect('localhost','root','Ctrip07185419') or die('can not connect to database'); mysql_select_db('moviesite',$db) or di

iOS开发——UI高级OC篇&自定义控件之调整按钮中子控件（图片和文字）的位置

自定义控件之调整按钮中子控件(图片和文字)的位置其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式一:imageRectForContentRect/titleRectForContentRect 自定义一个按钮控件在系统自带的位置设置方法中实现对应子控件位置调整 1 /** 2 3 * 设置内部图标的frame 4 5 */ 6 7 - (CGRect)imageRectForContentRect:(CGRect)contentRe

更改控件中DrawableLeft图片的大小，图片与文字的距离

Drawable drawable=getResources().getDrawable(R.drawable.xx); //获取图片 drawable.setBounds(left, top, right, bottom); //设置图片参数 xx.setCompoundDrawablesRelativeWithIntrinsicBounds(null,all,null,null); //设置到哪个控件的位置() 图片与文字距离 :属性android:drawablePadding="&q

php给图片加文字水印

<? php /*给图片加文字水印的方法*/ $dst_path = 'http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg'; $dst = imagecreatefromstring(file_get_contents($dst_path)); /*imagecreatefromstring()--从字符串中的图像流新建一个图像,返回一个图像标示符.其表达了从给定字符串得来的图像图像格式将自己主动监測,仅仅要php支持jpeg,png,