Question

我正在为学校项目制作单页个人资料。我必须链接回学校内联网上的班级主页。我希望链接位于我的名字正下方的红色矩形中。我的html在下面，是code can be viewed here的JSFiddle（由于隐私原因而被Lorem ipsum和通用名称替换）：

<!DOCTYPE html>
<html>
 <head>
    <title>John Smith</title>
    <link type="text/css" rel="stylesheet" href="styles.css"/>
 </head>
 <body>
  <div class="title">
   <h1><img width="50px" style="border-radius:100%" src="http://goo.gl/fj0Qm1"/> John Smith</h1>
   <p><a href="#">9IST Home</a></p>
  </div>
  <div class="about">
   <h3>About Me</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar dictum odio a aliquet. In cursus erat non fermentum elementum. Sed imperdiet odio quam, quis efficitur nunc dignissim quis. Donec porta finibus justo. Vivamus eleifend neque at finibus viverra. Proin at mi nec ligula blandit aliquet. Praesent sodales odio in risus gravida, ut sodales diam imperdiet. Integer at malesuada arcu, id hendrerit libero. Aliquam at leo sit amet quam porta scelerisque et eu felis. Vestibulum quis ligula in enim iaculis accumsan. Sed consequat, tellus vitae iaculis dignissim, ligula erat luctus tellus, non dapibus tortor enim eget risus.</p>
  </div>
  <div class="school-life">
   <h3>School Life</h3>
   <p>Quisque scelerisque nunc nec mauris elementum venenatis. In hac habitasse platea dictumst. Etiam placerat, dolor a pretium elementum, neque urna tincidunt velit, in sodales velit arcu sed justo. Ut eu imperdiet felis. Phasellus eget justo id nulla lobortis semper. Pellentesque sodales cursus purus sit amet vehicula. Fusce hendrerit risus sed bibendum aliquet. Morbi fringilla iaculis orci, non finibus purus tristique sed. In ac fringilla massa, sed egestas nulla. Aliquam eleifend, orci et sollicitudin mollis, purus ipsum rutrum libero, eget aliquam metus ligula vitae leo. Fusce sodales, tortor non lobortis lacinia, libero elit maximus mi, eu eleifend quam nulla id nibh. Aliquam pulvinar mi vitae convallis posuere. Fusce pharetra nibh sit amet diam tempus, id pellentesque tellus condimentum. Praesent porta sollicitudin nisi quis ultrices. Donec molestie purus arcu, sit amet iaculis tortor tempor eu.</p>
  </div>
  <div class="favourites">
   <h3>My Favourites</h3>
   <p>Morbi tristique ut nisi non euismod. Maecenas id massa cursus, auctor nisl ut, commodo enim. Nulla sed malesuada turpis. Cras quis justo elit. Etiam vitae leo metus. Aliquam sed urna scelerisque, vestibulum dui nec, viverra nibh. Mauris eu interdum sem, eu varius est. Vivamus tellus nulla, interdum a varius ac, rutrum eget velit. Suspendisse iaculis semper neque, nec pretium mi pharetra ut. Suspendisse condimentum a purus vel viverra. Suspendisse nec consequat dui. Duis tristique fermentum orci rutrum eleifend. Donec finibus, tellus interdum convallis commodo, risus lectus accumsan nibh, ac lacinia turpis est ut sem. Pellentesque elit tellus, faucibus id dictum in, ultrices in mi. Proin eget velit consequat, mollis arcu eget, fermentum ligula. Proin venenatis nisi et dui vulputate sodales.</p>
  </div>
  <div class="hopes">
   <h3>Hopes for the future</h3>
   <p>Donec a lobortis quam. Donec ultrices nunc diam, a sollicitudin diam finibus eget. Mauris aliquam vulputate nisl ut auctor. Aenean eget mi ligula. Phasellus consequat neque ullamcorper, ultricies orci vel, eleifend elit. Suspendisse non augue at ex semper sagittis. Maecenas sed congue risus, nec aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec commodo nunc ultricies felis cursus, non auctor libero cursus. Morbi pharetra nec sapien sit amet pretium. Duis tempus faucibus est non dignissim. Vestibulum vestibulum vestibulum libero, in convallis mi condimentum sed. Integer tincidunt mollis risus, vitae ornare eros porta vitae. Morbi aliquet lorem commodo, bibendum ex ac, dictum nibh. Curabitur tempus congue semper. Duis risus tortor, tempor in consequat quis, dictum non nisl.</p>
 </body>
</html>

和我的CSS在这里：

* {
    box-sizing: border-box;
}
body {
    font-family:helvetica;
    background-color:orange;
}
a {
    color:black;
    text-decoration:none;
}
h1 {
    font-size:50px;
    color:white;
}
.container {
    margin: auto;
    width: 1000px;
}
.title {
    width:auto;
    margin-top: 0px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
    padding-top: 0px;
    padding-bottom:0px;
}
.title a {
    color:#ffff00;
    text-decoration:underline;
}
.main-content {
    display: block;
    overflow: hidden;
}
.about {
    width: 33.33%;
    height: 700px;
    background-color: lightblue;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: inline;
}
.school-life {
    width: 33.33%;
    height: 700px;
    background-color: lightgreen;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: block;
}
.favourites {
    width: 33.33%;
    height: 700px;
    background-color: moccasin;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: block;
}
.hopes {
    width:100%;
    height:auto;
    background-color: black;
    color:white;
    padding: 40px 10px 10px 10px;
    bottom: 0;
}
li {
    list-style-type:none;
}
.hopes h3 {
    padding-top:40px;
}

任何帮助非常感谢

Answer 1

这是你正在寻找的吗？

.title p{
    position:relative;
    top:-100px;
}

jsfiddle

Answer 2

这是新的CSS。这种行为有几个原因。新FIDDLE

在line-height上删除了100px .title .title h1上方有一个下限，推动了超链接 .title p也领先一步推低了它。

哦，最后一节没有结束</div>：）

* {
    box-sizing: border-box;
}
body {
    font-family:helvetica;
    background-color:orange;
}
a {
    color:black;
    text-decoration:none;
}
h1 {
    font-size:50px;
    color:white;
    margin: 0 auto;
}
.container {
    margin: auto;
    width: 1000px;
}
.title {
    width:auto;
    margin-top: 0px;
    height: 100px;
    background-color: red;
    text-align: center;
    padding-top: 10px;
    padding-bottom:0px;
}
.title a {
    color:#ffff00;
    text-decoration:underline;
}

.title p {
    padding: 0;
    margin: 0 auto;
}
.main-content {
    display: block;
    overflow: hidden;
}
.about {
    width: 33.33%;
    height: 700px;
    background-color: lightblue;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: inline;
}
.school-life {
    width: 33.33%;
    height: 700px;
    background-color: lightgreen;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: block;
}
.favourites {
    width: 33.33%;
    height: 700px;
    background-color: moccasin;
    float: left;
    padding:10px 10px 10px 10px;
    margin:0px 0px 0px 0px;
    display: block;
}
.hopes {
    width:100%;
    height:auto;
    background-color: black;
    color:white;
    padding: 40px 10px 10px 10px;
    bottom: 0;
}
li {
    list-style-type:none;
}
.hopes h3 {
    padding-top:40px;
}

Answer 3

可能你可以通过这种方式实现它。

.title a {
    color:#ffff00;
    text-decoration:underline;
    position:relative;
    top:-100px;
}

JSFiddle

HTML标签定位

3 个答案: