Themeroller 图标没有排列在我期望的位置

发布于 2025-01-01 14:23:20 字数 1293 浏览 1 评论 0原文

我试图在页面上使用主题滚轮图标，但它没有排列在我期望的位置。如果我说：

    <html>
    <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" media="screen" 
                          href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
    </head>
    <body>
    <div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>
    </body>
    </html>

我希望看到：

+Hello World

但我只看到：

这是为什么？我怎样才能得到我期望的结果？

谢谢。

编辑1：我按照下面的建议将跨度更改为两个标签（打开和关闭，如上所示），但这没有任何区别。

相关的 CSS 似乎是：

.ui-icon
{
    display: block;
    text-indent: -99999px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-repeat: no-repeat;
}

.ui-icon
{
    width: 16px;
    height: 16px;
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-icon-plusthick 
{
    background-position: -32px -128px;
}

我尝试将 display: block 更改为 inline-block 等，但如果我这样做，情况会变得更糟。

编辑3：没关系，我搞砸了代码，它应该是：

 <span class="ui-icon ui-icon-plusthick" 
             style="display: inline-block"></span>Hello World</div>

而且效果很好。（我拼错了“显示”）

原文

I'm trying to use a themeroller icon on a page and it's not lining up where I'd expect. If I say:

    <html>
    <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" media="screen" 
                          href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
    </head>
    <body>
    <div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>
    </body>
    </html>

I would expect to see:

+Hello World

But instead I only see:

Why is this? And how do I get the result I'm expecting?

Thank you.

Edit 1:
I followed the suggestion below to change the span to two tags (open and close, as shown above), but that didn't make any difference.

The relevant CSS seems to be:

.ui-icon
{
    display: block;
    text-indent: -99999px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-repeat: no-repeat;
}

.ui-icon
{
    width: 16px;
    height: 16px;
    background-image: url("images/ui-icons_222222_256x240.png");
}

.ui-icon-plusthick 
{
    background-position: -32px -128px;
}

I tried changing the display: block to inline-block and other things, but it gets worse if I do.

Edit 3:
Nevermind, I screwed up the code, it should have been:

 <span class="ui-icon ui-icon-plusthick" 
             style="display: inline-block"></span>Hello World</div>

And that works fine. (I misspelled "display")

分享到QQ

分享到微博

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

发布评论

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

苍风燃霜 2025-01-08 14:23:21

span 不能自动关闭，必须有一个来关闭它

MDN 上的 span 元素

使用：

<div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>

而不是：

<div><span class="ui-icon ui-icon-plusthick"/>Hello World</div>

spans are not self closing must have a </span> to close it

span element on MDN

use:

<div><span class="ui-icon ui-icon-plusthick"></span>Hello World</div>

instead of:

<div><span class="ui-icon ui-icon-plusthick"/>Hello World</div>

回复收藏 0 原文

顾北清歌寒 2025-01-08 14:23:21

你在哪里关闭跨度？

<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" media="screen" 
                      href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
</head>
<body>
<div><span class="ui-icon ui-icon-plusthick"> </span>Hello World</div>
</body>
</html>

Where did you close the span?

<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" media="screen" 
                      href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
</head>
<body>
<div><span class="ui-icon ui-icon-plusthick"> </span>Hello World</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~