Question

我的网页上有一个标题如下：

enter image description here

我想将这些链接一直移到右边，但是当我这样做时，它们也会上升，就像这样：

enter image description here

使用照片编辑程序，下面是我想要的（右下角的链接）。嗯，理想情况下，我希望整个事物都是垂直居中的，但这似乎是我现在的能力太多了。我会选择留在右下角的链接。

enter image description here

HTML如下。唯一的变化是其中包含float:right的div（包含链接的div）。这样做会导致链接向右移动，但随后也会上升。我不想要了。我尝试过各种各样的东西，但都没有。我一定很遗憾。如何在不上升的情况下让链接浮动？

        <div style="width:900px">
            <div class="center" id="headerTopics" style="white-space:nowrap">
                <img src="~/Content/images/wizard1.ico" height="48" width="48"/>
                <h1 style="font-size: 32px; display:inline">Presto</h1>
                <div style="display:inline; float:right;">
                    <a href="#" id="appsLink">Apps</a>
                    <a href="#" id="serversLink">Servers</a>
                    <a href="#" id="variablesLink">Variables</a>
                    <a href="#">Resolve</a>
                    <a href="#" id="installsLink">Installs</a>
                    <a href="#">Log</a>
                    <a href="#">Ping</a>
                    <a href="#">Global</a>
                    <a href="#">Security</a>
                </div>
            </div>
        </div>

Answer 1

为浮动div添加边距：

<div style="display:inline; float:right; margin-top:30px">

<强> jsFiddle example

Answer 2

只需在链接顶部添加一些边距以满足您的偏好，使用某些css执行此操作将如下所示：

a {
    margin-top:20px;
}

当然，这适用于文档中的所有“a”标记，因此最好是向下钻取一点。也许在链接div上放一个类：

<div class="header-links" style="display:inline; float:right;">

然后css看起来像这样：

.header-links a {
    margin-top: 20px;
}

请记住，css位于样式标记之间的标题中

<head>
    <style>
        .header-links a {
            margin-top: 20px;
        }
    </style>
</head>

向右漂浮而不改变垂直位置

2 个答案: