当前位置：首页 → 问答吧 → display:inline-block引起的一个问题

display:inline-block引起的一个问题

时间：2010-06-03

来源：互联网

<a>前面放了一个图片，并且给<a>使用了display:inline-block；结果文字不见了（移到下面去了，因为li有行高，所以就隐藏看不到了），问题：如何使图片和文字在一行？
注：前面使用的是图片，不用背景
下面是可运行的代码：

<!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-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{ padding:0; margin:0px;} li{ list-style:none; width:180px; overflow:hidden; height:24px; line-height:24px} li a{ display:inline-block; padding-right:12px} </style> </head> <body> <ul> <li><img src="http://bbs.blueidea.com/images/default/folder_common.gif" /><a href="#">这是一段很长很长很长很长很长很长很长很长的文字</a></li> <li><a href="#">这是很少的几个文字</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: ruobilin 发布时间: 2010-06-03

我从试了下怎么没发现你那个问题啊图片还是有啊？你看看把那个高去掉留个行高看看怎么样啊？反正我没发现这个问题？

作者: n2813628 发布时间: 2010-06-03

看不明白你想表达什么 .你想实现的是什么效果

如果只是想文字和图片在一行.把a里面的display:inline-blick去掉就可以

作者: 4321285 发布时间: 2010-06-03

回复2楼的
点击运行是不是这样的？

没有前面的图片时的效果：

回复3楼的
这样做有这样做的目的啊！是想在a的后面显示省略号，当文字超出一定数量是显示... 这个没有前面的图片是正常的，一添加图片就不正常了
省略号... 是用背景图片来做的，这样为了兼容火狐

[ 本帖最后由 ruobilin 于 2010-6-3 10:36 编辑 ]

作者: ruobilin 发布时间: 2010-06-03

把图片加到a里,
再不行就贴详细一点的代码上来吧.包括省略号的.

作者: 4321285 发布时间: 2010-06-03

你可以把li设置成相对定位，然后图片绝对定位到前面. a的话，使用padding-left把图片的位置腾出来.

作者: redky 发布时间: 2010-06-03

这是前面没加图片的效果：

<!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-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{ padding:0; margin:0px;} li{ list-style:none; width:150px; overflow:hidden; height:24px; line-height:24px} li a{ display:inline-block; padding-right:20px; background:url(http://www.wanfangdesign.com/dot.gif) 128px 10px no-repeat; font-size:12px} </style> </head> <body> <ul> <li><a href="#">这是一段很长很长很长很长很长很长很长很长的文字</a></li> <li><a href="#">这是很少的几个文字</a></li> <li><a href="#">这是一段很长很长很长很长很长很长很长很长的文字这是一段很长很长很长很长很长很长很长很长的文字</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

这是前面有图片的效果：

<!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-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{ padding:0; margin:0px;} li{ list-style:none; width:150px; overflow:hidden; height:24px; line-height:24px} li a{ display:inline-block; padding-right:20px; background:url(http://www.wanfangdesign.com/dot.gif) 128px 10px no-repeat; font-size:12px} </style> </head> <body> <ul> <li><img src="http://bbs.blueidea.com/images/default/folder_common.gif" /><a href="#">这是一段很长很长很长很长很长很长很长很长的文字</a></li> <li><a href="#">这是很少的几个文字</a></li> <li><a href="#">这是一段很长很长很长很长很长很长很长很长的文字这是一段很长很长很长很长很长很长很长很长的文字</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

要求把图片不加到a里

[ 本帖最后由 ruobilin 于 2010-6-3 11:08 编辑 ]

作者: ruobilin 发布时间: 2010-06-03

<!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-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul{ padding:0; margin:0px;} li{ list-style:none; width:150px; overflow:hidden; height:24px; line-height:24px} li a{padding-right:20px; background:url(http://www.wanfangdesign.com/dot.gif) 128px 10px no-repeat; font-size:12px} li img{float:left;} </style> </head> <body> <ul> <li><img src="http://bbs.blueidea.com/images/default/folder_common.gif" /><a href="#">这是一段很长很长很长很长很长很长很长很长的文字</a></li> <li><a href="#">这是很少的几个文字</a></li> <li><a href="#">这是一段很长很长很长很长很长很长很长很长的文字这是一段很长很长很长很长很长很长很长很长的文字</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: 4321285 发布时间: 2010-06-03

感谢楼上的热心；
昨天尝试了好久没搞定，所以今天来请教大家
display:inline-block;去掉是在一行了，不过后面的省略号也没了哦；
实在不行的话，那只好给图片一个标签，给<a>一个标签了

[ 本帖最后由 ruobilin 于 2010-6-3 11:18 编辑 ]

作者: ruobilin 发布时间: 2010-06-03

还是把图片放到a标签里面吧.

作者: 4321285 发布时间: 2010-06-03

图片是小头像，有各种不同的，也有在线（彩色）、不在线（灰色）之分，用背景不是很好控制吧，这个没试过，这样可行么

作者: ruobilin 发布时间: 2010-06-03

我是说把图片放到a标签内部. 不是说做背景

作者: 4321285 发布时间: 2010-06-03

这样可以了，十分感谢，昨天把可能的都想了，就是没想过把图片放到a里，鄙视一下自己；再次感谢你的热心。

作者: ruobilin 发布时间: 2010-06-03