无法在DIV底部定位链接

时间:2015-06-23 16:53:26

标签: html css

我试图拥有一个全屏标题,并在其底部(但在其中)有一个链接,说明了解更多信息。然后在标题下面有其余的网站内容,在这种情况下" test"。

我遇到的两个问题是:

  • 了解更多内容应该位于底部中间位置,但它确实位于右侧
  • div class" content"坐在不在它下面的灰色盒子里面。

这是我正在使用的代码:



* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
a {
    text-decoration: none;
}
.header {
    height: 100%;
    width: 100%;
    background: lightgray;
    text-align: center;
    min-height: 350px;
    position: relative;
}
li {
    list-style: none;
}
.nav {
    display: block;
    padding: 20px;
}
.nav img {
    float: left;
}
.nav ul {
    float: right;
    font-size: 0;
}
.nav ul li {
    display: inline-block;
    font-size: 16px;
    padding-left: 10px;
}
.nav ul li:first-child {
    padding-left: 0px
}
.nav ul li a {
    padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: 200px;}
.content {background-color: blue; display: block;}

<html>
    
    <body>
        <div class="header">
            <div class="nav">
                <img width="39" height="35" alt="" src="#">
                <ul>
                    <li><a href="#">Services</a>

                    </li>
                                        <li><a href="#">Writings</a>

                    </li>
                    <li><a href="#">Contact</a>

                    </li>
                </ul>
            </div>
                <span class="billboard">Hello!</span>  
                                <a class="learn">Learn More</span> 
        </div>
            <div class="content">Test</div>
    </body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

您有一个未公开的anchor标记。您需要将left: 50%; width: auto;设置为.learn课程才能使其居中。

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
a {
    text-decoration: none;
}
.header {
    height: 100%;
    width: 100%;
    background: lightgray;
    text-align: center;
    min-height: 350px;
    position: relative;
}
li {
    list-style: none;
}
.nav {
    display: block;
    padding: 20px;
}
.nav img {
    float: left;
}
.nav ul {
    float: right;
    font-size: 0;
}
.nav ul li {
    display: inline-block;
    font-size: 16px;
    padding-left: 10px;
}
.nav ul li:first-child {
    padding-left: 0px
}
.nav ul li a {
    padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: auto; left: 50%;}
.content {background-color: blue; display: block;}
<html>
    
    <body>
        <div class="header">
            <div class="nav">
                <img width="39" height="35" alt="" src="#">
                <ul>
                    <li><a href="#">Services</a>

                    </li>
                                        <li><a href="#">Writings</a>

                    </li>
                    <li><a href="#">Contact</a>

                    </li>
                </ul>
            </div>
                <span class="billboard">Hello!</span>  
                                <a class="learn">Learn More</span></a>
        </div>
            <div class="content">Test</div>
    </body>

</html>

答案 1 :(得分:0)

要对齐“了解更多”,请使用

 .learn {
  position: absolute; bottom: 0; width: 200px;

  left: 50%; transform: translateX(-50%);
 }

在内容之前,<a class="learn">Learn More</span>结束标记应为</a>

https://jsfiddle.net/afelixj/efty6zjL/