Question

我正在尝试在页面上使用themeroller图标，但它没有排到我期望的位置。如果我说：

    <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 to inline-block等等，但如果我这样做会更糟。

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

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

这很好用。（我拼错了“显示”）

Answer 1

跨度不是自动关闭必须有</span>来关闭它

span element on MDN

使用：

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

而不是：

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

Answer 2

你在哪里关闭了跨度？

<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">&nbsp;</span>Hello World</div>
</body>
</html>

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

2 个答案: