当前位置：文江博客话题详情

将 YUI 按钮的基线与其旁边文本的基线对齐

发布于 2024-07-24 21:32:47 字数 246 浏览 1 评论 0原文

我想在某些文本旁边显示一个 YUI 按钮，但是 YUI 按钮文本的基线与它旁边的文本的基线不一致。按钮文本及其旁边的文本的字体系列和大小相同。

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

如何使文本基线对齐？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丢了幸福的猪 2024-07-31 21:32:48

使用以下样式将相邻文本括在 span 标记中：

<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
   YUI Button:
</span>

Enclose the adjacent text in a span tag with the following styles:

<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
   YUI Button:
</span>

回复收藏 0 原文

清旖 2024-07-31 21:32:48

由于 .yui-button 具有 display: inline-block 属性，因此它的行为类似于块，但保持内联。

通过内联行为，该元素的盒模型将附加到该行，而按钮的内容将表现得像一个块。因此，您必须按照 Phase 的建议进行某种垂直调整。

由于按钮的最小高度为 2em，因此您必须进行一些手动调整。这：

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

在 IE7、FF3 和 Chrome 中给了我很好的结果，但它们之间仍然存在轻微的不一致。您可能已经探索了在第一个跨度、第一个子跨度和按钮上应用了哪些导致轻微不一致的其他属性。当然，您也可以调整选择器以仅应用于按钮的一个实例，而不是应用于所有 yui 按钮。

您还可以设置要继承的最小高度，但随后您将看到其他属性如何发挥作用（例如，第一个子项（按钮之前的跨度中的跨度）具有块布局）。

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

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

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.

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 */
}

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.

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.

回复收藏 0 原文

星光不落少年眉 2024-07-31 21:32:48

在button.css 的第7 行，

.yui-button {
   display:-moz-inline-box;
   vertical-align:text-bottom;
}

如果删除vertical-align 语句，相邻文本将与按钮文本对齐。

有趣的。从您提供的链接中，从上到下编号，a = 对齐，n = 未对齐，不同的浏览器显示：

ie6 1 n, 2 n, 3 n 
ie7 1 a, 2 n, 3 n 
ie8 1 a, 2 n, 3 a 
ff2 1 a, 2 n, 3 a 
ff3 1 a, 2 n, 3 n 
saf 1 a, 2 a, 3 a 
chr 1 a, 2 a, 3 a

删除垂直对齐可将其修复在 ff2 中，但不会在 ff3 中修复。

IE 不支持内联块。这可能会导致一些浏览器差异。

我不知道为什么safari/chrome、ff2和ff3之间有这么大的区别。

On line 7 in button.css there is

.yui-button {
   display:-moz-inline-box;
   vertical-align:text-bottom;
}

If you remove the vertical-align statement the adjacent text will line up with the button text.

Interesting. From the link you provided, numbering from top to bottom, a = aligned, n = not aligned, the different browsers show:

ie6 1 n, 2 n, 3 n 
ie7 1 a, 2 n, 3 n 
ie8 1 a, 2 n, 3 a 
ff2 1 a, 2 n, 3 a 
ff3 1 a, 2 n, 3 n 
saf 1 a, 2 a, 3 a 
chr 1 a, 2 a, 3 a

Removing the vertical align fixes it in ff2 but not ff3.

IE does not support inline-block. That may be causing some of the browser differences.

I don't know why there is such a big difference between safari/chrome, ff2 and ff3.

回复收藏 0 原文

段念尘 2024-07-31 21:32:48

我尝试从头开始设计按钮的样式。下面的 CSS 是我想出的。它的优点是按钮的相邻文本不需要包含在任何附加元素中。它在最新版本的 Internet Explorer、Firefox 和 Safari 中运行良好。 Firefox 2 没有正确调整按钮的高度，而 IE 6 和 7 则各自以自己的特殊方式对其进行了破坏。

这是此代码的一个实例。

.yui-button {
  display: inline-block;
  background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
  border-color: #808080;
  border-style: solid;
  border-width: 1px 0;
  margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
  display: inline-block;
  border-color: #808080;
  border-style: solid;
  border-width: 0 1px;
  margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
  background-color: transparent;
  border: medium none;
  margin: 0;
  min-height: 2em;
  padding: 0 10px;
}

I had a go at styling the button from scratch. The following CSS is what I came up with. It has the advantage that the adjacent text to the button does not need to be wrapped in any additional elements. It works fine in the latest version of Internet Explorer, Firefox, and Safari. Firefox 2 doesn't correctly size the button height, and IE 6 and 7 each butcher it in their own special ways.

Here's a live example of this code.

.yui-button {
  display: inline-block;
  background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
  border-color: #808080;
  border-style: solid;
  border-width: 1px 0;
  margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
  display: inline-block;
  border-color: #808080;
  border-style: solid;
  border-width: 0 1px;
  margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
  background-color: transparent;
  border: medium none;
  margin: 0;
  min-height: 2em;
  padding: 0 10px;
}

回复收藏 0 原文