文本未显示在div中的正确位置

Question

用户名未正确显示在div中的正确位置。它显示在div元素之外。我已经尝试更改text-align属性，但这不起作用。我不想更改.rclick类，因为它被用于另一个正常工作的元素。我怎样才能使用额外的课程？

php code

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;
}

Answer 1

为了确保表示和内容的良好分离，我建议从HTML标记中删除内联样式规则，并使用CSS定义所有样式声明。

由于CSS的级联性质，HTML标记中的内联样式将覆盖HTML页面中<style>标记内的等效声明，这反过来会覆盖外部样式表中的声明。

如果要在元素中应用多个类，可以同时应用它们，如下所示：

#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 example来证明这一点。