Question

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

我遇到的两个问题是：

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

这是我正在使用的代码：

＆＃13;

* {
    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;}

＆＃13;

<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;

Answer 1

您有一个未公开的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>

Answer 2

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

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

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

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

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

无法在DIV底部定位链接

2 个答案: