图片列表换行错位,图片无法左对齐怎么办

图片与文字标题组成的无序列表,会因为标题长度的不同,而出现换行.这样就出现图片无法左对齐的问题.

可以这样,

一,加上这个css样式

.nowrap{white-space:nowrap;overflow:hidden;}

二,或用程序逻辑判断.比如循环到第四个图片时,添加一个hr换行符标签.

hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:10px 0;border:none;-moz-box-sizing:content-box;box-sizing:content-box;}
hr.space{background:#fff;color:#fff;visibility:hidden;}
时间: 2024-12-22 19:38:47

图片列表换行错位,图片无法左对齐怎么办的相关文章

备忘:UIButton 的图片和标题 向左对齐

UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定, 所以如果要几个这样有image有title的按钮纵向排列对齐, 无论你怎么调整 imageEdgeInsets和titleEdgeInsets,都有可能导致前面图片对得不整齐, 所以,干脆来个向左对齐!!简化处理!! 记住了,这么设置: btn.contentHorizontalAlignment = UIControlContentHorizontal

Android -如何在底部左对齐,中对齐,右对齐三个按钮图片 巧用Relative Layout

Relative Layout 不仅可以指定同级的元素之间的位置关系(e.g. layout_toLeftOf) 还可以指定子元素与父元素之间的位置关系(e.g. layout_alignParentLeft 相对于父元素左对齐) 利用这一点,可以轻松实现图片在屏幕底部对齐显示. 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://

使UIButton中的图片和文字实现左对齐

UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对齐,无论你怎么调整 imageEdgeInsets和titleEdgeInsets,都有可能导致前面图片对得不整齐,所以,干脆来个向左对齐!!简化处理!!记住了,这么设置:btn.contentHorizontalAlignment =UIControlContentHorizontalAlignm

Vue 封装可向左向右查看图片列表的组件

实现了图片列表展示的功能,一次性可查看4张图,可向左向右点击查看,代码如下: index.vue: <template> <div class="content-container"> <div class="content-container-item content"> <!-- 使用transition加过渡效果 --> <transition-group tag="div" class

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量.尺寸都是参差不齐的,并限定了每一行的总宽度.这种非等宽的图片列表,在Google+.flickr也都有用到. 最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路. 非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好). 先理下基本的需求: 1.图片的宽度是不固定的:

WP8_区分滑动和点击(在图片列表中)

在windows phone中,对于一个页面中 有图片列表的,滑动的时候,很容易被误认为是点击了图片,而打开图片详细信息等,原意是滑动列表,由此对图片添加2个事件,来控制其点击行为(滑动的时候,基本不会执行到do clicked something处)   private bool _isClickEnable = false; private DateTime _clickedTime;   private void Img1_OnMouseLeftButtonDown(object send

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

函数传参,改变Div任意属性的值&amp;&amp;图片列表:鼠标移入/移出改变图片透明度

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