Question

对于我正在处理的网站的一部分，我正在构建一个价目表......因为它是交互式的，我使用复选框类型的输入和标签来制作它;您可以检查所需的服务，网页会为您提供这些服务的总费用。很容易。

我的问题是文体问题;我正在使用设置为右边的float属性的span来区分价格和服务描述（价格在div中正确对齐，描述在复选框旁边左对齐）。整个标签定位相对定位。当我设置悬停伪类以更改标签的颜色时，颜色更改似乎在chrome上无法正常工作。下面是一个复制问题的小代码示例...

<html>
<head>
    <style type="text/css">
        div#leftcolumn
        {
            width:500px;
        }
        span.right
        {
            float:right;
        }
        input, label
        {
            position:relative;
            left:50px;
        }
        label:hover
        {
            color:#FF0000;
        }
    </style>
</head>
<body>
    <div id="leftcolumn">
        <input id="option1" type="checkbox" /><label for="option1">This is a label... span class="right">and this is the same label</span></label><br/>
        <input id="option2" type="checkbox" /><label for="option2">A new label!<span class="right">Y U NO COLOR RIGHT</span></label>
    </div>
</body>

如果您在Chrome上尝试此示例，我相信您应该注意到非常奇怪的悬停行为......但是，这似乎在Firefox和Internet Explorer中运行良好。这是铬的错误吗？我这个编码很差吗？我的实际页面有效......如果有人了解这个问题会解释发生了什么，我将不胜感激。我知道我可以通过将相对定位移动到div并将所有输入和标签放在div中而不是直接定位标签和输入来进行解决方法，但我觉得这应该可以工作....

一如既往，谢谢你的时间。

Answer 1

更改以下内容：

span.right
{
position:relative;
left:150px;
}

我相信这是你正在寻找的效果。

Answer 2

您的问题与标签位置无关：相对; 浮动似乎是你的问题：正确

我建议你用这种风格替换span.right

    span.right
    {
        padding-left:100px;
    }

解决此问题的另一种方法是添加清晰：正确;标签：悬停样式

    label:hover
    {
        color:#FF0000; clear:right;
    }

带标签的镀铬问题：悬停和相对定位

2 个答案: