[英]HTML: Unexplained vertical gap between text-wrapped inline-block elements with an image?
Why is there a gap here (ie 'element3' LOWER than 'element4')? 为什么这里有差距(即'element3'LOWER比'element4')?
+----------------+ +----------------+
|+------++------+| VS. |+------++------+|
|| 1 || 2 || || 1 || 2 ||
|| || || || || ||
gap |+------++------+| |+------++------+|
----> | +------+| ----> |+------++------+|
why?? |+------+|+--+ 4|| no gap || ||++ 4||
|| 3 |||Im| || || 3 ||++ ||
|| ||+--+ || || || ||
|| |+------+| |+------++------+|
|+------+ | | |
+----------------+ +----------------+
Here is the code 这是代码
<?php
echo "
<style type=text/css>
a.keys{
display:inline-block;
width:100px;height:100px;
border:1px solid #000;
}
</style>
<div class=panel style='width:250px;height:100%;border:1px solid #000;'>
<a class=keys href='#'>1</a>
<a class=keys href='#'>2</a>
<a class=keys href='#'>3</a>
<a class=keys >
<img src=img/apple.jpg style='width:50px;height:50px;' >
</a>
</div>
";
?>
Ie why is the text-wrapped element 3 LOWER positioned than element 4? 也就是为什么文本包装元素3 LOWER比元素4定位? It has something to do with the image (and size), but I can't figure out why an image SMALLER than the parent element would cause such behaviour? 它与图像(和大小)有关,但我无法弄清楚为什么比父元素更小的图像会导致这种行为?
Any help would be appreciated... 任何帮助,将不胜感激...
你需要在.keys
vertical-align:top
指定vertical-align:top
。
" vertical-align:top " on just the image works: 图像上的“ vertical-align:top ”工作原理:
<div class=panel style='width:250px;height:100%;border:1px solid #000;'>
<a class=keys href='#'>1</a>
<a class=keys href='#'>2</a>
<a class=keys href='#'>3</a>
<a class=keys >
<img src=img/apple.jpg style='width:50px;height:50px;**vertical-align:top**' >
</a>
</div>
See - http://jsbin.com/opejo4/2 请参阅 - http://jsbin.com/opejo4/2
changing " height:100px " to " line-height:100px " in a.keys also does the trick. 在a.keys中将“ height:100px ”更改为“ line-height:100px ”也可以解决问题。
<style type=text/css>
a.keys{
display:inline-block;
width:100px;
line-height:100px;
border:1px solid #000;
}
</style>
<div class=panel style='width:250px;height:100%;border:1px solid #000;'>
<a class=keys href='#'>1</a>
<a class=keys href='#'>2</a>
<a class=keys href='#'>3</a>
<a class=keys >
<img src=img/apple.jpg style='width:50px;height:50px;' >
</a>
</div>
See - http://jsbin.com/opejo4/4 请参阅 - http://jsbin.com/opejo4/4
Looks as though it could be your html mark up. 看起来好像它可能是你的html标记。
Try editing the HTML as follows: 尝试编辑HTML,如下所示:
<div class="panel" style="width:250px;height:100%;border:1px solid #000;">
<a class="keys" href="#">1</a>
<a class="keys" href="#">2</a>
<a class="keys" href="#">3</a>
<a class="keys" href="#">
<img src="img/apple.jpg" style="width:50px;height:50px;" />
</a>
</div>
Also, assign vertical-align:top
to your css as suggested by meder : 另外,根据meder的建议,将vertical-align:top
指定给你的css:
a.keys{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
vertical-align: top;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.