1

ユーザー名が div 内の正しい位置に正しく表示されていません。div要素の外に表示しています。text-align プロパティを変更しようとしましたが、うまくいきません。.rclick適切に機能する別の要素に使用されているため、クラスを変更したくありません。追加のクラスを使用するにはどうすればよいですか?

phpコード

echo "<div class=\"rclick\" title=\"{$user}\"  style=\"width: auto;\">";

            if (strlen($user) > 10) 
                {
                    $user = wordwrap($user, 10);
                    $user = substr($user, 0, 10);
                echo "Hi {$user}...";
                }
                else
                {
                echo "Hi {$user}";              
                }
                echo "</div>";

CSSコード

#nav .rclick {
position: relative;
left: 500px;
top: 40px;
width: 250px;
height: 28px;
background: url(../images/Employer.jpg) no-repeat;
color: #FFFFFF;
font-size: 1.14em;
}

テキストを黒色で表示する

4

1 に答える 1

1

プレゼンテーションとコンテンツを適切に分離するには、HTML マークアップからインライン スタイル ルールを削除し、CSS を使用してすべてのスタイル宣言を定義することをお勧めします。

CSS のカスケードの性質により、HTML マークアップのインライン スタイルは<style>、HTML ページのタグ内の同等の宣言をオーバーライドし、外部スタイルシート内の宣言をオーバーライドします。

要素に複数のクラスを適用する場合は、次のように両方を適用できます。

#nav .customrule
{
    /*extra style definitions*/
}

そして、あなたのHTMLで：

<div class="rclick customrule" title="monika">Hi monika</div>

div を相対的に配置しているため、テキストをスパンでラップし、div 内に絶対に配置して、必要な位置に配置できます。

<div class="rclick" title="monika"><span>Hi monika</span></div>

#nav .rclick span
{
    position: absolute;
    left: 10px;
    top: 10px;
}

スパンの起点は、最初の相対的に配置されたコンテナーになります。この場合、これは含まれている div です。

これを示すjsfiddleの例を追加しました。

于 2013-04-24T10:32:05.720 に答える