如何在其链接下居中放置一个下拉列表

我试图将下拉列在下面的代码中，在其链接下。这是如何完成的？我将使用jquery来做显示/隐藏部分，但是我无法将其置于r这个字母的后面，后面会是。如何在其链接下居中放置一个下拉列表

<!DOCTYPE html> 
<html> 
<head> 
<title> New Document </title> 
<style type="text/css"> 
.main{ 
    width:300px; 
    background:cyan; 
} 
.right{ 
    float:right; 
    position: relative; 
    white-space: nowrap; 
} 
ul { 
    list-style:none outside none; 
    padding:0px; 
    margin:0; 
    position:absolute; 
    right: 0; 

} 

</style> 
</head> 

<body> 
<div class="main"> 
    Left 
    <div class="right"> 
       <span>R</span> 
      <ul> 
       <li>Option 1</li> 
       <li>Option 2</li> 
       <li>Option 3</li> 
       <li>Option 4</li> 
      </ul> 
    </div> 
</div> 

</body> 
</html>

来源

2013-10-10 jmenezes

把R的ul内的第一个列表元素。添加一些CSS修改，你就完成了。

见我的小提琴：http://jsfiddle.net/Wq2Ls/1/

你也不需要.menu容器。它的所有CSS都可以放入ul。
我也用div替代了.right范围。跨度是一个内联元素，并不是将ul放在其中的最佳做法。

编辑：
如果设置position:absolute到ul它不是一个块元素，不会让自己在即使R有text-align:center中心的R位置。 R也应该放在一个div它可以填补其父母的整个宽度。
更新提琴：http://jsfiddle.net/Wq2Ls/5/

来源

2013-10-10 18:11:46 matewka

我把这些链接放在不同的跨度的原因是我可以使用display：none来隐藏它们。现在我该如何隐藏它们？ – jmenezes

你可以结合'：first-child'选择器。例如。 'ul> li：first-child'引用'ul'中的第一个'li'元素。 – matewka

所以我把'r'放在'span'中。看我的编辑。仍然无法在'r'下找到正确的中心请参阅：http://jsfiddle.net/Wq2Ls/3/ – jmenezes

如何在其链接下居中放置一个下拉列表

回答

相关问题