CSS仍然无法将超链接与窗口的左下角对齐

时间:2011-10-08 03:06:37

标签: html css

我只是想在左下角出现一个超链接(div .t2),我假设它与身体的尺寸有关,但我可以弄明白了。

我的HTML是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title> Incident Report Page </title>
   <link rel="stylesheet" href="http://....">
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div class="header">
    Incident Report Page    
</div>

<div class="t1">
<form action="connect_database.php" method=post >
<p>
username   <input type="text"   name = "un"> <br><br>
password   <input type="password" name = "pw"> <br><br>
<input type="submit" name = "subby" value = "Enter">
</p>
</form>
</div>

<div class="t2">
    <p><b><a href="http://....">HTTP exchanges</a></b></p>
</div>

</body>
</html>

,CSS是:

body {
    font-family: Century Gothic, Arial;
    background-color: #836FFF; 
    position: relative;
    height: 100%;
    width: 100%;
}
.t2 {
     position: absolute;
     bottom:0;
     left:0;
} 
.header {
    margin: 0 auto;
    width: 910px;
    background-color: #6A5ACD;
    font-size: 60px;
    color: #473C8B;
    text-align: center;
}
.t1 {
    margin: 20px auto 0px auto; 
    padding: 10px;
    font-size: 16px; 
    font-weight: bold; 
    color: #473C8B; 
    text-align: center;
    padding-top: 20px;
}

1 个答案:

答案 0 :(得分:0)

如果您想将其固定在视口的左下角,只需将.t2更改为position:fixed;

.t2 {
    position: fixed;
    bottom:0;
    left:0;
}

这是演示......

http://jsfiddle.net/h2qFU/