这是问题的图片:
我的子导航有一些 anchor 文本相互堆叠，我想知道如何修复它。相互堆叠的 anchor 文本例如是“现场国际象棋、每日国际象棋或 4 人国际象棋”的 anchor 文本。如何修复这些 anchor 标记？
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#outer-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
display: table-cell;
width: 15%;
height: 100%;
vertical-align: top;
background-color: rgb(68, 68, 68);
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
background-color: gray;
}
#play {
background-color: rgb(20, 15, 15);
color: white;
display: flex;
align-items: center;
padding: 10px;
text-decoration: none;
}
#sidebar img {
padding-top: .5em;
padding-right: .1em;
}
#subnav-content {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 15%;
width: 300px;
background-color: black;
}
#subnav-content a {
display: flex;
padding-right: 15em;
text-align: left;
text-decoration: none;
font-size: 13pt;
color: white;
}
/* When you move the mouse over the subnav container, open the subnav content */
#subnav:hover #subnav-content {
display: block;
}
/* First sub nav */
#chess {
padding-top: 5px;
padding-right: 9px;
}
#live {
padding-right: 9px;
}
#daily {
padding-right: 9px;
}
#comp {
padding-right: 9px;
}
#tourney {
padding-right: 11px;
padding-left: 2px;
}
#four {
margin-left: -3px;
padding-right: 4px;
}
#var {
margin-left: -8px;
}
#leader {
margin-left: -2px;
padding-right: 5px;
}
#lib {
margin-left: -3px;
padding-right: 6px;
}<!DOCTYPE html>
<html>
<head>
<title>nested anchor links in divs</title>
<link rel="stylesheet" href="styles/styling.css">
</head>
<body>
<div id="outer-container">
<div id="sidebar">
<div id="subnav">
<a href="#" id="play"><img src="images/play logo.webp" alt="play" id="play" height='25px' width='25px'><span>Play</span></a>
<div id="subnav-content">
<a href="#"><img src="images/play logo.webp" alt="play" id="hand" height='20px' width='20px'>Play</a>
<a href="#"><img src="images/live chess icon (1).png" id="live" height="21px" width="21px">Live Chess</a>
<a href="#"><img src="images/sun icon (1).png" id="daily" height="21px" width="21px">Daily Chess</a>
<a href="#"><img src="images/computer icon (1).png" id="comp" height="23px" width="23px">Computer</a>
<a href="#"><img src="images/tournament_icon (1).png" id="tourney" height="22px" width="22px">Tournaments</a>
<a href="#"><img src="images/4_player_chess_icon (1).png" id="four" height="27px" width="27px">4 Player Chess</a>
<a href="#"><img src="images/chess_variants_icon (1).png" id="var" height="28px" width="36px">Variants</a>
<a href="#"><img src="images/leaderboards_icon (1).png" id="leader" height="25px" width="25px">Leaderboard</a>
<a href="#"><img src="images/library_icon (1).png" id="lib" height="25px" width="25px">Library</a>
</div>
</div>
</div>
<div id="content">
</div>
</div>
</body>
</html>最佳答案
你的 CSS 中的 padding-right 是问题所在:
#subnav-content a {
display: flex;
padding-right: 15em; < causes your Problem
text-align: left;
text-decoration: none;
font-size: 13pt;
color: white;
}
删除它，你就可以开始了。
如果您再次遇到奇怪的格式，我强烈建议您使用大多数浏览器提供的“检查”工具。有了它，您可以看到(除其他外)应用于单个 HTML 元素的每个 CSS 规则，还可以将它们关闭并再次打开。
关于html - 为什么我的 anchor 文本堆叠在一起，我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68586847/