Question

从我看到的例子可以通过

来实现

right: 0px;
top: 0px;

或者这个的一些变化。但是，当我这样做时，我的div仍保持在屏幕左侧。我需要开始进入-1000px区域，使其显示在右上方，这似乎不正确。

这是我的HTML，它是带有“mysettings-menu”类的div我试图放在屏幕的右上角。

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink(...)</li>
                    <li>@Html.ActionLink(...)</li>
                    <li>@Html.ActionLink(...)</li>
                </ul>
                <div class="mysettings-menu">
                    <ul>
                        <li>
                            <a href="#">Settings</a>
                            <ul class="sub_menu">
                                <li><a href="#">Log In</a></li>
                                <li><a href="#">Add New Application</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

正如你所看到的，我正在使用一些默认的bootstrap类，但即使将我的div放在这些div之外也没有什么区别，因为它仍然尽可能靠近屏幕的左侧。

.mysettings-menu                      { position: relative; right: 0}

Answer 1

把它放在右上角，：

.mysettings-menu{
 position: absolute; 
 right: 0px;
 top:0px;
}

即。将position更改为absolute。

Answer 2

首先，

position: relative

表示相对于元素的当前位置。结合

right: 0

它肯定不会影响你的div的定位。

你想要的是

.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }

虽然两者在某些方面有所不同，但在其他方面类似。

Answer 3

如果您使用的是Bootstrap，则可以添加类pull-left。 basicalley将属性float: left !important添加到你的div中以使其向左浮动（你也可以在右边使用它）

Answer 4

这个怎么样：

http://jsfiddle.net/lharby/zs15e48q/

CSS：

.nav {
    float:left;
}

.mysettings-menu { 
    float:right;    
}

正如其他人所提到的，您也可以使用绝对定位，但这取决于您是否要更改文档的流量。

修改

正如一个答案所指出的（Yerko Palma），如果你使用bootstrap，你可以向你的元素添加左拉和右拉类，这实际上是比为现有元素编写新的css更好的解决方案。

更新了小提琴：

http://jsfiddle.net/lharby/zs15e48q/1/

Answer 5

position属性的大部分是相对于父容器的。

如果您希望div位于其父容器的右上角，则需要将该位置指定为绝对位置：

.mysettings-menu { position: absolute; top:0; right: 0; }

position属性的替代值为：

static (default)
relative
fixed

fixed是唯一不会相对于其父容器定位的position属性，而是相对于窗口的位置。

例如：

.mysettings-menu { position: fixed; top:0; right: 0; }

将div设置为显示在窗口的最右上方，无论您在哪里滚动 - 它始终可见。

Answer 6

jsfiddle demo

HTML

   <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav" style="display:inline-block">
                <li>@Html.ActionLink(...)</li>
                <li>@Html.ActionLink(...)</li>
                <li>@Html.ActionLink(...)</li>
            </ul>

        <div class="mysettings-menu">
            <ul>
                <li>
                    <a href="#">Settings</a>
                    <ul class="sub_menu">
                        <li><a href="#">Log In</a></li>
                        <li><a href="#">Add New Application</a></li>
                    </ul>
                </li>
            </ul>
        </div>
     </div>

CSS

.navbar-collapse{

    border:1px solid red

}
.mysettings-menu{
    border:1px solid blue;
    display:inline-block;
    position:absolute;
    right: 10px;

CSS：将div显示在屏幕的右上角

6 个答案: