我正在尝试将菜单添加到组合背景中。但是当我将背景与菜单嵌套在其中时，它们不会协同工作并且不会正确对齐。例如，当我将其中一个菜单向左移动时，其他菜单开始向另一个方向移动。现在我真的尝试解决这个问题，但似乎现在唯一的方法是调整它们中的每一个，直到所有的都正确对齐。这就是我今天的问题:
如何在不一遍又一遍地调整每个菜单的情况下完成这项工作？
css和html代码来了
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li>a{color: white;
font-size: 12px}
<ul class="baked">
<li>
<a href="PointerIndex.html">PointerIndex</a>
<ul>
<li><a href="Reflections.html">Reflections</a></li>
<li><a href="Practicing.html">Practicing</a></li>
<li><a href="NewsFeed.html">NewsFeed</a></li>
<li><a href="ExArt.html">Explanatory Art</a></li>
<li><a href="TopAi.html">Top AI</a></li>
</ul>
</li>
</ul>
注意我一共有9个这样的菜单，都包含在下面的div中
div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
最佳答案
我对您提供的信息感到困惑。 我修改了您的代码，其中子菜单项右对齐。尝试一下。请指定更多信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
<style type="text/css">
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
text-align:right; padding-right:10px;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li a{color: white;
font-size: 12px}
/* div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
*/
</style>
</head>
<body bgcolor="#999999">
<ul class="baked">
<li>
<a href="PointerIndex.html">PointerIndex</a>
<ul>
<li><a href="Reflections.html">Reflections</a></li>
<li><a href="Practicing.html">Practicing</a></li>
<li><a href="NewsFeed.html">NewsFeed</a></li>
<li><a href="ExArt.html">Explanatory Art</a></li>
<li><a href="TopAi.html">Top AI</a></li>
</ul>
</li>
</ul>
</body>
</html>
关于html - 在 bg 容器中放置文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9347474/