如何正确对齐li？
如何正确对齐li？
提问于 2012-06-06 03:23:06
我正试着在我的网站上做一个下拉菜单。我希望能够点击一个向下箭头，并在其下方弹出一个菜单。现在，菜单只在屏幕上显示了一部分。
下面是一张图片，展示了现在的情况：
我想让菜单项的右侧与向下箭头对齐，而不是像现在这样排在左侧。
这是我现在正在使用的CSS。
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-image: url(bg.jpg);
background-position: center;
background-repeat: repeat;
}
#top {
background-color: #333;
height: 30px;
margin-bottom: 10px;
}
#menu {
color: #CCC;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
position: absolute;
}
#top_right {
height: 30px;
width: auto;
text-align: left;
float: right;
margin-right: 5px;
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
.menu {
padding-left: 10px;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:link {
color: #CCC;
text-decoration: none;
}
a.mlink:visited {
color: #CCC;
text-decoration: none;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:active {
color: #CCC;
text-decoration: none;
}
#selected {
color: #6C0;
}
#content {
background-color: #CCC;
}
/*
START OF MENU TEST
*/
#esempio{
margin:0;
padding:0;
}
#esempio ul{
padding:0;
margin:0;
}
#esempio li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#esempio li a{
width:auto;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#esempio li a:hover{
background-color: #666;
}
#esempio ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#esempio ul li:hover ul{
visibility:visible;
}
/*
END OF MENU TEST
*/Stack Overflow用户
回答已采纳
发布于 2012-06-06 03:27:24
需要定位包含元素：
li {
position: relative;
}然后，您的dropdown元素可以被放置到其容器的右侧：
li .submenu {
position: absolute;
right: 0;
}如果看不到标记或页面操作的示例，我就不能说得更具体了。
小提琴：http://jsfiddle.net/jonathansampson/CXbTX/
附注
顺便说一句，我会避免这样做：
* { margin: 0; padding: 0; border: 0 }这会给你带来一些困扰，尤其是在设计表单元素样式的时候。相反，我鼓励您使用一些可以以更直观的方式规范化CSS的工具，比如Meyer's Reset。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10903574
复制相关文章
相似问题
腾讯云开发者
