向上移动内嵌显示的字符

发布于 2024-10-15 17:04:55 字数 481 浏览 6 评论 0原文

我有以下面包屑菜单标记：

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

当所有元素都存在时，是否有一种智能方法可以将这些 › (.raquo) 字符向上移动几个像素，而无需绝对定位内嵌显示？我希望这个字符比其他字符小并显示在行的中心（或向下/向上的一些像素）。

（我需要它也适用于 IE6 及更高版本）

原文

I have the following markup for breadcrumbs menu:

<div>
    <span class="start-here">You are here:<span>
    <a href="/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

Is there a smart way to move those › (.raquo) characters a few pixels up without absolute positioning when all of the elements are displayed inline? I want this character to be smaller than the others and to be displayed in the center of the line (or some pixels down/up).

(I need it to work also for IE6 and up)

分享到QQ

分享到微博

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

发布评论

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

千鲤 2024-10-22 17:04:55

.raquo {
    position:relative;
    top:-2px;
}

对我来说效果最好

.raquo {
    position:relative;
    top:-2px;
}

worked best for me

回复收藏 0 原文

前事休说 2024-10-22 17:04:55

vertical-align: 3px

任何金额或单位。

它对于自定义字体和其他不正确对齐的跨度和元素等内容非常强大。我只是将它用在我从设计师那里得到的字体上。

vertical-align: 3px

with any amount or unit.

It is very powerful for things like custom fonts and other spans and elements that are incorrectly justified. I just used it on a font that I got from my designer.

回复收藏 0 原文

疯到世界奔溃 2024-10-22 17:04:55

不确定 IE6，但似乎下面的内容应该可以让您接近您想要的。

.raquo {
  font-size: 10px;
  vertical-align:middle; 
}

只需将 font-size 设置为您需要的任何内容即可，垂直对齐应将其设置为 line-height 的中间。

Not sure about IE6, but it seems like the following should get you close to what you want.

.raquo {
  font-size: 10px;
  vertical-align:middle; 
}

Just make font-size whatever you need, vertical align should set it to the middle of the line-height.

回复收藏 0 原文

不知所踪 2024-10-22 17:04:55

基于 @sashn 的答案，如果您想针对未来的字体大小更改进行未来验证，我会这样做...

.raquo {
  position:relative;
  top:-0.1em;
}

这样位置偏移量将根据字体大小自动缩小或扩展。

Building on @sashn's answer, if you want to future-proof it against future font size changes, I would do this...

.raquo {
  position:relative;
  top:-0.1em;
}

This way the position offset will automatically shrink or expand depending on font size.

回复收藏 0 原文

闻呓 2024-10-22 17:04:55

您可以使用vertical-align:top; CSS 中的 font-size:x-small;。虽然很难完美地处于中间......

回复收藏 0 原文

半透明的墙 2024-10-22 17:04:55

我不想这么说……但你可以使用桌子。我发现这是确保所有内容都垂直居中的唯一可靠方法：

<table>
  <tr>
    <td class="start-here">You are here:<td>
    <td><a href="/">example.com</a></td>
    <td class="raquo"> › </td> 
    <td><a href="/news">News</a></td>
    <td class="raquo"> › </td> 
    <td>Title</td>
  </tr>
</table>

I hate to say this... but you could use a table. I've found it to be the only reliable way to make sure that everything is vertically centered in a line:

<table>
  <tr>
    <td class="start-here">You are here:<td>
    <td><a href="/">example.com</a></td>
    <td class="raquo"> › </td> 
    <td><a href="/news">News</a></td>
    <td class="raquo"> › </td> 
    <td>Title</td>
  </tr>
</table>

回复收藏 0 原文

~没有更多了~