Не получается поставить теги <а> в одну строку как на фото,помогите!

Question


    * {
          box-sizing: border-box;
        }
        
        body {
          margin: 0;
          font-family: 'Gilroy', sans-serif;
        }
        
        a {
          color: inherit;
          text-decoration: none;
        }
        
        .main-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #222020;
        }
        
        .zag {
          color: white;
          font-family: 'Graphik LCG', sans-serif;
          margin-bottom: 30px;
        }
        
        .down{
          float: right;
          display: block;
          color: white;
          background-color: #2f1ce4 ;
          padding: 20px; 
          border: 3px solid #2f1ce4;
        }
        
        .det{
          float: left;
          display: block;
          color: white;
          padding: 20px;
          border: 3px solid white;
          background: rgba(0, 125, 215, 0,7) ;

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Skillbox</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
       <div class="main-content">
       <h1><a href="skillbox.html" target="_blank" class="zag">Skillbox</a></h1>
            <div class="down"><a href="Skillbox_Layout.docx"download>Скачать програму курса</a></div>
            <div class="det"><a href="skillbox.html">Подробно</a></div>
       </div>
    </body>
    </html>

Здравствуйте и спасибо за помощь!

Answer 1

Всё из-за flex-direction: column - ваши блоки выстроены по вертикальной оси. Если Вы используете display: flex для родительского элемента, то свойство float для дочернего элемента работать не будет. Ну и вообще float здесь не нужен, он используется для обтекания элемента другими элементами. Подробнее можно почитать здесь: https://learn.javascript.ru/float

Также непонятно зачем вообще здесь нужно использовать флексбоксы, если можно обойтись position: absolute для отцентровки блоков.

Еще одна проблема, которую я заметил в вашей верстке - ваши ссылки помещены в блоки, соответственно сами блоки не кликабельны и пользователю необходимо кликать именно по тексту ссылки, чтобы она сработала. Так делать не стоит. Можно убрать div, которые оборачивают ссылки и поставить тегам ссылок классы этих дивов, чтобы их стилизовать, так мы сделаем полноценно кликабельные кнопки.

Реализация без флексбоксов: Добавляем обертку, которую будем центровать с помощью position: absolute, удаляем настройки флексбоков, удаляем float у элементов, удаляем div, которые оборачивают наши ссылки, добавляем ссылкам классы down и det.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Gilroy', sans-serif;
}

h1 {
    margin-top: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.main-content {
    position: relative;
    height: 100vh;
    background-color: #222020;
}

.center {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zag {
    color: white;
    font-family: 'Graphik LCG', sans-serif;
    margin-bottom: 30px;
}

.down {
    color: white;
    background-color: #2f1ce4 ;
    padding: 20px; 
    border: 3px solid #2f1ce4;
}

.det {
    color: white;
    padding: 20px;
    border: 3px solid white;
    background: rgba(0, 125, 215, 0,7);
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-content">
        <div class="center">
            <h1><a href="skillbox.html" target="_blank" class="zag">Skillbox</a></h1>

            <a class="down" href="Skillbox_Layout.docx"download>Скачать програму курса</a>
            <a class="det" href="skillbox.html">Подробно</a>
        </div>
    </div>
</body>
</html>

Если Вы всё же по какой-то причине хотите реализовать это с помощью флексбоксов, то Вам достаточно обернуть ссылки в отдельный блок и удалить float. Реализация с помощью флексбоксов:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #222020;
}

.zag {
  color: white;
  font-family: 'Graphik LCG', sans-serif;
  margin-bottom: 30px;
}

.down {
  color: white;
  background-color: #2f1ce4 ;
  padding: 20px; 
  border: 3px solid #2f1ce4;
}

.det {
  color: white;
  padding: 20px;
  border: 3px solid white;
  background: rgba(0, 125, 215, 0,7);
}

 <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="main-content">
       <h1><a href="skillbox.html" target="_blank" class="zag">Skillbox</a></h1>

        <div class="content">
            <a class="down" href="Skillbox_Layout.docx"download>Скачать програму курса</a>
            <a class="det" href="skillbox.html">Подробно</a>
        </div>
   </div>
</body>
</html>

БЛОГ НА HUSL

Не получается поставить теги <а> в одну строку как на фото,помогите!

Ответы (1 шт):