请在继续之前阅读我的个人资料。任何不对代码本身进行批评的人都将被忽视。好的？好。
我正在尝试使用the code on this page对导航标题执行工具提示。最底层的工具提示，具体而言。
我已经从我自己的CSS和网页中删除了代码的相关部分，并在他们的Try It编辑器中使用它来使其正常工作，而且自上周以来我一直在讨论这个问题。我已经做得最远，甚至在设计上做出了一些牺牲，我不确定如何解决。我会承认像这样的工具提示对我来说是一个非常新的领域，我试图学习一个新的东西，它让我给它一个非常咸的侧视。因此，指出我出错的地方以及我需要做些什么来纠正它是我正在寻找的。任何可以更好地解释这一点的网站的链接也将受到极大的赞赏。
<!DOCTYPE html>
<html>
<style>
body {
margin: 0px;
padding: 0;
background-color: #000000;
background-image: url(http://www.metathriving.com/img/index2bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #72809F;
}
/* Header */
#header {
width: 960px;
height: 160px;
margin: 0px auto;
background-color:rgba(0,0,0,0.5);
}
/* Boy Without A Fairy */
#navi {
float: left;
width: 900px;
height: 55px;
}
#navi ul li {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#navi a {
display: block;
float: left;
height: 45px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #578fa8;
}
#navi a:hover {
color: #9dd0ed;
}
#navi a.active {
color: #FFFFFF;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #c0c0c0;
color: #000000;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<div id="header">
<!-- Hey! Listen! -->
<div id="navi">
<ul>
<li><a href="index2.html"><span style="color:#c0c0c0; font-weight: bold;">Just Another<br>Brick in<br>the Wall</span></a></li>
<li><div class="tooltip"><a href="about.html">Weary Eyes Still<br>Stray to the<br>Horizon <span class="tooltiptext">More About Me</a></span><div></li>
<li><a href="http://thirdlaw.metathriving.com/"><span style="font-style: italic;">A Heavenly Ride<br>Through<br>Our Silence</span></a></li>
<li><a href="ancestors.html"><span style="font-style: italic;">A Thousand<br>Miles of<br>Moonlight Later</span></a></li>
<li><a href="social"><span style="font-style: italic;">Trade Your Heroes<br>For Ghosts</span></a></li>
<li><a href="health"><span style="font-style: italic;">If You Can Hear<br>This Whispering<br>You Are Dying</span></a></li>
<li><a href="dignityeol.html"><span style="font-style: italic;">I'll See You On<br>the Dark Side<br>of the Moon</span></a></li>
<li><a href="links.html"><span style="font-style: italic;">Frontiers Shift<br>Like<br>Desert Sands</span></a></li>
<li><a href="http://www.twitter.com/Teatime_Check"><span style="font-style: italic;">You Are Only<br>Coming Through<br>In Waves</span></a></li>
</ul>
</div>
</body>
</html>
这里是w3schools.com Tryit Editor面板中代码呈现的屏幕截图。 （忽略字体颜色以及由于文本+背景而在某些地方不容易看到的事实。当我完成布局时，字体会被调整，我改变字体颜色，因为我努力确保事情正在努力并挑出一些东西。完整的代码确实在文本下提供了坚实的背景，以便更好地辨认。）
Screencap of what the code makes
正如你所看到的，它是换行符。它在哪里，工具提示工作。但它不应该将其余部分移到新线上。至少，我不希望它这样做。我不知道它在哪里脱轨。就像我说的那样，经过一周的工作，研究和几本书的研究，这是一个我试图学习的新技巧，而且我很难过。它就在我的面前，而且它显得很血腥，但是它是什么？
答案 0 :(得分：0)
两个问题：
工具提示中有一些标签被错误地包裹。即，<a></span></a></span>。我纠正了这个。
然后，工具提示会导致您不想要的休息。将float: left;添加到.tooltip课程。
body {
margin: 0px;
padding: 0;
background-color: #000000;
background-image: url(http://www.metathriving.com/img/index2bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #72809F;
}
/* Header */
#header {
width: 960px;
height: 160px;
margin: 0px auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* Boy Without A Fairy */
#navi {
float: left;
width: 900px;
height: 55px;
}
#navi ul li {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#navi a {
display: block;
float: left;
height: 45px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #578fa8;
}
#navi a:hover {
color: #9dd0ed;
}
#navi a.active {
color: #FFFFFF;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
float: left;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #c0c0c0;
color: #000000;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style> <body> <div id="header"> <!-- Hey! Listen! --><div id="navi">
<ul>
<li><a href="index2.html"><span style="color:#c0c0c0; font-weight: bold;">Just Another<br>Brick in<br>the Wall</span></a>
</li>
<li>
<div class="tooltip"><a href="about.html">Weary Eyes Still<br>Stray to the<br>Horizon <span class="tooltiptext">More About Me
</span></a>
</div>
</li>
<li><a href="http://thirdlaw.metathriving.com/"><span style="font-style: italic;">A Heavenly Ride<br>Through<br>Our Silence</span></a>
</li>
<li><a href="ancestors.html"><span style="font-style: italic;">A Thousand<br>Miles of<br>Moonlight Later</span></a>
</li>
<li><a href="social"><span style="font-style: italic;">Trade Your Heroes<br>For Ghosts</span></a>
</li>
<li><a href="health"><span style="font-style: italic;">If You Can Hear<br>This Whispering<br>You Are Dying</span></a>
</li>
<li><a href="dignityeol.html"><span style="font-style: italic;">I'll See You On<br>the Dark Side<br>of the Moon</span></a>
</li>
<li><a href="links.html"><span style="font-style: italic;">Frontiers Shift<br>Like<br>Desert Sands</span></a>
</li>
<li><a href="http://www.twitter.com/Teatime_Check"><span style="font-style: italic;">You Are Only<br>Coming Through<br>In Waves</span></a>
</li>
</ul>
</div>