html - div 框不会使用属性 display:inline-block 排列；

Question

我对我的代码感到非常困惑的几件事：

如果没有注释掉的“垂直对齐”行，div 框就不会对齐。
a中的<p>标签在<div>顶部增加了一个额外的空间。

图片根本不显示。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
<!--vertical-align: middle; -->
    border: 2px dashed #008000;
}
</style>
<title>Frends n shiz</title>
</head>
<body>
    <div><p>billy</p><img href="http://i.imgur.com/mango.jpg" /></div>
    <div><p>bob</p></div>
    <div>joe</div>
    <div>schmoe</div>
    <div><p>jane</p></div>
    <div>bane</div>
</body>
</html>

score 0 · Accepted Answer

你的代码真的很奇怪，有很多问题，比如：

img should use src instead of href
You need to set the 'p' margin to 0
For vertical-align: middle you should use display: table-cell
Instead of 'line-height', you should use 'height' (if necessary) etc.

检查这个jsfiddle：http: //jsfiddle.net/grsVp/1/

score 0 · Accepted Answer

图片根本不显示。

它应该src在图像上而不是href：

<img src="http://i.imgur.com/mango.jpg" />

代替

<img href="http://i.imgur.com/mango.jpg" />

div 中的 AP 标签在顶部增加了一个额外的空间。

是的，默认p是段落，所以它会被浏览器添加一个默认边距。您可以将p边距重置为p{margin:0}

如果没有注释掉的“垂直对齐”行，div 框就不会对齐。

在上述修复之后，您可以使用float:left代替display:inline-block并查看其渲染方式的差异，不确定您希望它如何。.

像这样的东西？？

score 0 · Accepted Answer

我对我的代码感到非常困惑的几件事：

如果没有注释掉的“垂直对齐”行，div 框就不会对齐。这就是它的目的，使用它！不要使用浮点数！
a中的<p>标签在<div>顶部增加了一个额外的空间。这是正常行为，将默认边距 (0 1em) 重置为 0。如前所述
图片根本不显示。如前所述，链接图片的属性错误

html - div 框不会使用属性 display:inline-block 排列；

3 回答 3

Related

Reference