将YUI按钮的基线与其旁边的文本的基线对齐 [英] Aligning the baseline of a YUI button with the baseline of the text next to it

问题描述

我想在某些文字旁边显示一个YUI按钮，但YUI按钮文字的基线不与其旁边的文字基线对齐。

I'd like to display a YUI button next to some text, but the baseline of the YUI button text does not line up with the baseline of the text next to it. The font family and size is identical for both the button text and the text next to it.

如果我使用纯HTML按钮，文本基线会正确排列。

If I use a plain HTML button the text baselines correctly line up.

这是问题的实例。

如何获得文本基线排列？

推荐答案

由于.yui按钮具有属性 display：inline-block ，它将像一个块，但保持内联。

Since the .yui-button has the property display: inline-block, it will behave like a block but stay inline.

通过内联行为，此元素的框模型将附加到该行，而按钮的内容将像块一样。因此，你必须像Phase建议的做一些垂直调整。

By behaving inline, the box model of this element will be attached to the line while the contents of the button will behave like a block. Thus, you'll have to do some sort of vertical adjustment as Phase suggested.

由于按钮有一个 min-height：2em ，你需要做一些手动调整。 This：

Since the button has a min-height: 2em, you'll have to do some manual adjustment. This:

.yui-skin-sam .yui-button {
    margin-bottom: -0.5em; /* adjust for 2em min-height */
    vertical-align: baseline; /* use consistent baseline */
}

<和Chrome，但它们之间仍然有轻微的不一致。您可以探索在第一个跨度，第一个子跨度和按钮导致轻微不一致时应用的其他属性。当然，你也可以调整选择器只应用于按钮的一个实例，而不是所有的yui按钮。

gave me good results in IE7, FF3, and Chrome, but there is still slight inconsistency among them. You may have explore what other properties are applied at the first span, the first child span, and button that are causing the slight inconsistencies. Of course, you could also adjust the selector to apply to only one instance of the button rather than all yui buttons.

你也可以设置min-height为inherit，但是你会看到其他属性如何发挥作用（例如第一个孩子（在按钮之前的跨度跨度）具有块布局）。

You could also set the min-height to inherit, but then you'll see how the other properties come into play (e.g. the first child (the span in the span before the button) has a block layout).

，您可以开始在文本的其余部分添加多个包装，以便通过在跨度内构建合适的跨度来使它们像按钮一样运行，但是您似乎想避免这种情况。如果您这样做，请检查几个不同的浏览器。

Alternatively, you could start adding multiple wrappers around the rest of the text so they behave just like the button by building the appropriate spans within spans, but you seem to want to avoid that. If you do, check a couple different browsers.

这篇关于将YUI按钮的基线与其旁边的文本的基线对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！