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

私は見ることを期待します：

+Hello World

しかし、代わりに私は見るだけです:

+

どうしてこれなの？そして、どうすれば期待する結果を得ることができますか?

ありがとうございました。

編集 1: 以下の提案に従ってスパンを 2 つのタグ (上記のようにオープンとクローズ) に変更しましたが、違いはありませんでした。

関連する 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>

そして、それはうまくいきます。（「ディスプレイ」のスペルを間違えました）

4

2 に答える 2

2

スパンは自己閉鎖ではなく、</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>
于 2012-02-01T16:37:19.127 に答える
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">&nbsp;</span>Hello World</div>
</body>
</html>
于 2012-02-01T16:11:24.563 に答える