如何在其鏈接下居中放置一個下拉列表

我試圖將下拉列在下面的代碼中，在其鏈接下。這是如何完成的？我將使用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

如何在其鏈接下居中放置一個下拉列表

回答

相關問題