文本不在正确的位置显示在

Question

用户名不正确显示在正确的位置。它显示在div元素之外。我曾尝试更改文本对齐属性，但这不起作用。我不想更改.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; 
} 

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来说明这一点。