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，所以您可以将文本包装在一个 span 中，并将其绝对定位在 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 回答