Question

我在使用Firefox时遇到了CSS问题。它应该很简单。一切都工作得很好，除了我似乎无法使标题中的链接与右边对齐（颜色将改变以及除对齐之外的任何其他修改）。我能做到的唯一方法是将其浮动，但这会颠倒链接的顺序并且看起来是错误的。也许有更好的方法来处理标题中的链接而不是我使用的范围？不过，我会在另一个位置的标题中有更多的链接，所以我需要指定我所指的链接...

看看下面的代码：

首先，HTML：

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
<a href="#">Logout</a>
</span>
</div>
<div id="menu">
</div>

<div id="content">

</div>
</div>
</body>
</html>"

现在，CSS：

/ * Layout2.css * /

#all {
    border: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.headlinks a {
    text-align:right;
        color:#ffffff;
}

#head {
    border: none;
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10%;
    background-color:#336699;
}

#head h1 {
    margin-top: 1%;
    text-align:right;
}

#menu {
    border: none;
    position: absolute;
    left: 1%;
    top: 12%;
    width: 20%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:#b1b2a3;
}

#content{
    border: none;
    position: absolute;
    left: 25%;
    top: 12%;
    width: 72%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #eeeeee;
}

谢谢！

Answer 1

将<span class="headlinks>更改为<div>，并将text-align: right添加到其CSS样式中。

Answer 2

你想：

#head { text-align: right; }

head div是一个100％宽度的块元素。 Headlinks是一个包含一个链接的内联元素。 text-align在块元素上使用其内容，而不是内联元素，以指示如何将它们放在父元素中。

另一种方法是将headlinks作为块级元素：

span.headlinks { display: block; text-align: right; }

使用哪个取决于您想要达到的目标。

Answer 3

尝试将'text-align：right'放在'head'div而不是'headlinks'范围内。此样式适用于块级元素，如div，而不是内联元素，如span。

CSS链接定位问题

3 个答案: