我在使用 Firefox 时遇到了 CSS 问题。它应该很简单。一切都工作正常，除了我似乎无法让标题中的链接右对齐(颜色会改变以及除了对齐之外的任何其他修改)。我能做到的唯一方法是将其正确 float ，但这会颠倒链接的顺序并且似乎是错误的。也许有比我使用的跨度更好的方法来处理 header 中的链接？不过，我会在另一个位置的标题中有更多链接，所以我需要以某种方式指定我指的是哪些链接...
看看下面的代码:
首先是 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;
}
谢谢!
最佳答案
更改 <span class="headlinks>到 <div> , 并添加 text-align: right到它的 CSS 样式。
关于css - CSS 链接定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2278080/