5

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

我不是要求对颜色进行批评，但如果有人可以帮助我重新设计样式：对齐，那就太棒了。

基本上

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

或者

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

显示低于 50%：

<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 如果这与环绕相混淆。

4

2 回答 2

7

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

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

呈现如下：

内联元素示例

图像与段落内联。请注意，图像的底部与文本的底部对齐。同样的事情也在你的 Fiddle 中发生——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 在共同对齐上的元素。

如果出于某种原因您真的想使用 inline-block，请应用vertical-alignment: bottom到.button您当前拥有的样式。

我给你的两种解决方案都会导致：

在此处输入图像描述

于 2013-04-26T20:26:36.910 回答
3

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

考虑以下：

<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，在这种情况下，图像文件不存在，因此在不存在的图像（0x0 像素尺寸）周围绘制了一个 28x28 的框，并位于行的中间，这就是它向上突出的原因。

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

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

我希望这能让您了解内联块的行为方式，这是一个非常灵活的元素。

于 2013-04-26T17:54:24.060 回答