为什么在内联块div中添加跨度会改变它的布局？

Question

我有一堆动态生成的html（See Fiddle），它基本上将一些难看的按钮放在网格中的丑陋计算器上，但当我尝试用跨度中的文本替换图像时，按钮向下移动

我不是要求对颜色进行批评，但是如果有人可以帮我解决造型问题：对齐方式，这将是非常棒的。

基本上

<div><span>Text</span></div>

或

<div><div>Text</div></div>

低于：

<div><img src="url.jpg" /></div>

，而：

<div>Text</div>

如果我没有弄乱字体大小，

会出现在网格中的图像按钮上方，但是：

<div style="font-size: 12px">Text</div>

将其向右移回span所拥有的位置。

这个问题似乎与我的javascript无关，因为附带的小提琴有同样的问题而且没有js（只是生成的html和包含的css）。

所以是的，除了之外的任何帮助，它都很难看？

注意：我故意为按钮选择了 display: inline-block ，以便在父容器中提供自动包装。我不想去 position:fixed 或 position:absolute ，如果这与包围有关。

Answer 1

您遇到的对齐问题是在display: inline-block元素上使用.button的预期结果。使用内联块元素基本上使元素像块元素一样，但它的底部对齐为内联元素。以此为例：

<p>example example example <img src="something.jpg" /></p>

这样呈现：

图像与段落内联。请注意，图像的底部与文本的底部对齐。同样的事情正在你的小提琴中发生 - span文本的底部与图像的底部对齐（一旦你移除相对定位）。内联块元素内部有内联元素，因此底部对齐的行为与内联元素的行为自然相似。

内联块元素非常有用，但可能不适用于这种情况，在这种情况下，您有几个不同的按钮，这些按钮本身就是不同的元素。我建议这样做：

.button {
     border: 1px outset;
     background-color: #FACC43;
     color: darkgreen;
     display: block;
     margin : 10px;
     margin-right : 0px;
     margin-bottom: 0px;
     float:left;}

使用display: block和float:left使按钮阻止元素。它们的行为可以预测为共同对齐时30px x 30px的元素。

如果出于某种原因您真的想要使用内嵌块，请将vertical-alignment: bottom应用于您目前拥有的.button样式。

我给你的两个解决方案都会产生这个：

Answer 2

你在这里做了很多，所以我简化了你的代码，以说明一些有助于澄清事情的想法。

请考虑以下事项：

<div id="calculator">
    <div class="button">Basic</div>

    <div class="button"><span style="font-size: 30px;">Tall</span></div>

    <div class="button">
        <img src="http://placehold.it/28x28">
    </div>

    <div class="button">
        <img src="http://placehold.it/28x28" style="vertical-align: bottom;">
    </div>

    <div class="button" style="height: 28px; width: 28px;">
        <img src="no-image.jpg">
    </div>

    <div class="button" style="height: 28px; width: 28px;">
        <img src="no-image.jpg" alt="alt">
    </div>

    <div class="button">
        <img src="no-image.jpg" alt="alt">
    </div>

</div>

和以下CSS（基本上是你的按钮样式）：

.button {
    border: 1px outset;
    background-color: #FACC43;
    color: darkgreen;
    display: inline-block;
    margin: 10px 0px;
}

和更新小提琴：http://jsfiddle.net/audetwebdesign/j3SRn/

从左到右，我在内联块上显示7个按钮。

按钮1，只有文本，内联块缩小到适合，足够简单。

按钮2，再次增加字体大小，框缩小到适合，并注意文本的底部与按钮1共享一个公共基线。

按钮3,28x28图像，图像底部在基线上，注意图像下方的间隙。

按钮4，与3相同但使用vertical-align: bottom，图像位于线框底部略低的位置。

按钮5，在这种情况下，图像文件不存在，因此在不存在的图像周围绘制一个28x28的框（0x0像素尺寸）并位于该行的中间，这就是它向上投影的原因。

按钮6，没有图像，但这次我们有替换文字，包裹在一个28x28的框中，所以文字落在基线上，边框框位于它周围并向下突出。

按钮7，没有替代文字的图像，没有框尺寸，因此边框会缩小以适合落在基线上的文字。

我希望这能让你了解内联块的行为方式，非常灵活。