Question

我正在创建一个包含多个链接的侧边栏菜单，其中许多链接需要根据面板的标题长度和宽度要求跨越2行。该设计包括“＆gt;＆gt;”作为文本项目符号，所以第二行缩进。我需要在悬停时使超链接下划线，但只有文本部分，而不是＆gt;＆gt;或第二行的空格。我已经尝试过几十种我在网上找到的解决方案，这是我最接近的解决方案：

http://jsfiddle.net/FbDGL/

这是HTML：

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
<a href="neuropsychological-assessment.htm">
<font color="#00457C">Neuropsychological Assessment</font></a></b><br>
</font>
<font color="#00457C" face="Lucida Sans Unicode" size="2">
» <a href="adhd.htm">Attention Deficit Hyperactivity<br>
<span class="space">&nbsp;&nbsp; </span>Disorder</a><br>

这是CSS：

a:link {text-decoration: none;
color:#00457C;
}
a:visited {text-decoration: none;
color:#00457C;
}
a:hover {text-decoration: underline}
a:hover .space {text-decoration: none}
a:active {text-decoration: none}

它适用于IE，但在Chrome，Firefox或Safari中无效。第二行上的空格仍然显示在这些浏览器中悬停的下划线。任何人都可以为我提供适用于所有浏览器的代码来实现这一目标吗？

Answer 1

如果您不需要手动添加换行符，则可以设置悬挂缩进。链接不会强调这一点。

按如下方式更改您的html：

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
        <a href="neuropsychological-assessment.htm">
        <font color="#00457C">Neuropsychological Assessment</font></a></b><br>
        </font>
    <div class='div_for_length'>
        <font color="#00457C" face="Lucida Sans Unicode" size="2">
            <div class='link'>»
            <a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a></div>
            </div>

在CSS规则中添加以下内容：

.div_for_length {
    width: 250px; /* or whatever your needs are */
}

.link {
    display: block;
    float: left;
    text-indent: -1em;
    padding-left: 1em;
}

作为旁注，如果您使用的是CSS，则应避免使用<font>标记。这些应该用CSS规则表示。

Answer 2

您应该使用包含自定义list-style-image的列表。在下面的示例中，我制作了»和base64编码的图像。 Live Deom

HTML

<div class="some-class">Neuropsychological Assessment</div>

<ul>
    <li><a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a></li>
</ul>

CSS

.some-class{
    font-family:"Lucida Sans Unicode";
    color:#00457C;
}
a:link,a:visited {
    text-decoration: none;
    color:#00457C;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none
}
ul {
    font-family:"Lucida Sans Unicode";
    width:200px;
    list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwVADcb2iGGJQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABQSURBVBjTfc8xEkBADAXQt6yCc7mdI2holcYV7Lk0O+zsIFXeT5EEJgRP1XZiQfywHjuO3NcGLWak2k0OArpi7e2IAVsejC+WsBZH1f5/8wJm7g+T7rifRwAAAABJRU5ErkJggg%3D%3D);
}

编辑：您可以确定将图片设置为list-style-image

Answer 3

使用:before制作自定义项目符号，如果您为链接指定width，则文本将自动转到下一行。 http://jsfiddle.net/FbDGL/3/

HTML：

<font face="Lucida Sans Unicode" color="#00457C" style="font-size: 11pt"><b>
        <a href="neuropsychological-assessment.htm">
        <font color="#00457C">Neuropsychological Assessment</font></a></b><br>
        </font>
        <font color="#00457C" face="Lucida Sans Unicode" size="2">
         <a href="adhd.htm" class="arrows">Attention Deficit Hyperactivity Disorder</a><br>

CSS

a:link {text-decoration: none;
    color:#00457C;
    }
a:visited {text-decoration: none;
    color:#00457C;
    }
a:hover {text-decoration: underline}
a:hover .space {text-decoration: none}
a:active {text-decoration: none}

a.arrows:before{
    content: "»";
    position: absolute;
    margin-left: -10px;
}
a.arrows{
    margin-left: 10px;
    width: 200px;
    float: left;
}

请不要使用它：

<font color="#00457C" face="Lucida Sans Unicode" size="2">
» <a href="adhd.htm">Attention Deficit Hyperactivity<br>
<span class="space">&nbsp;&nbsp; </span>Disorder</a><br>

它真的很草率。将所有样式保留在CSS中

<a href="adhd.htm">Attention Deficit Hyperactivity Disorder</a>

如何仅使用缩进在2行超链接上为文本加下划线

3 个答案: