Невозможно поместить ссылку внизу DIV

Я пытаюсь получить полный экранный заголовок, а внизу (но внутри него) есть ссылка, в которой говорится узнать больше. Затем под заголовком остальная часть содержимого веб-сайта, в данном случае «тест».Невозможно поместить ссылку внизу DIV

двух вопросов, у меня есть это:

Узнайте больше должны сидеть на нижней середине, но это doens't, он немного сидит справа
Класс ДИВ «содержание» сидится в пределах серая коробка не под ней.

Это код, я работаю с:

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

источник

2015-06-23 Jimmy

Для начала ваш HTML неправильно сформирован. У вас есть несоответствующие теги. Запустите его через валидатор. – j08691

У вас есть незаконченный 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>

источник

2015-06-23 17:03:44 Muhammet

Для выравнивания по центру 'Подробнее', используйте

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

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

Перед содержанием, <a class="learn">Learn More</span> закрывающий тег должен быть </a>

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

источник

2015-06-23 17:03:54

Невозможно поместить ссылку внизу DIV

ответ

Смежные вопросы