Question

我正试图将下拉列表放在下面的代码中，在其链接下。这是怎么做到的？我将使用jquery进行显示/隐藏部分，但我无法将其置于r后面的glyphicon字母的中心位置。

    <!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>

Answer 1

将R放在ul内作为第一个列表元素。添加一些CSS修改，你就完成了。

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

您也不需要.menu容器。它的所有CSS都可以放在ul中我还用{em> div 替换了.right span 。 Span是一个内联元素，将ul放入其中并不是最好的做法。

修改：
如果您将position:absolute设置为ul，则它不是块元素，即使R具有R，也不会让text-align:center位置在中心位置}。此外，R应放在div中，以便填充其父级的整个宽度更新了小提琴：http://jsfiddle.net/Wq2Ls/5/

如何在其链接下居中下拉列表

1 个答案: