Question

我正在尝试创建简单的java脚本菜单。

我有两个内部ul元素绝对定位于相对定位的div元素。在什么情况下，我无法使ul内联块彼此相邻。似乎第二个块被绘制在第一个块的顶部。我还想让菜单显示在屏幕的右侧。

我甚至给出了宽度为100％的ul元素。一切正常，直到我添加位置：绝对;到ul元素。

<div id="izmenu">   
            <ul>
                <li class="menu-heading"><a href="#">home</a></li>
            </ul>
            <ul>
                <li class="menu-heading"><a href="#">login</a></li>
                <li><a href="#">settings</a></li>
                <li><a href="#">logout</a></li>
            </ul>
        </div>

CSS

#izmenu {
 position: relative; 
 float:right;
}

#izmenu ul {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 list-style: none;
 display:inline-block;
 vertical-align:top;
 position:absolute;
 right:0;
}

#izmenu ul li 
{
     padding: 0 0 0 0;
     margin: 0 0 0 0; 
}

 #izmenu a {
    background-color: #006899;
    text-decoration: none;
    padding: 10px 15px 10px 15px;
    display: block;
    text-align: center;
    color: white;
    margin: 0 0 0 0; 
}

Answer 1

浮动元素怎么样？

#izmenu ul {
  margin: 0 10px 0 0;
  display:block;
  float:left;
}

Fiddle

Answer 2

两个元素都被相对定位到同一个div。做你想做的事情的一种方法是给出ul的id，然后像这样设置right位置：

#one {
  right: 0
}

#two {
  right: 60px;
}

请参阅http://jsfiddle.net/FhV8c/6/

绝对定位多个元素，无需坐标

2 个答案: