Два блока с элементами на одной линии

@sendxt · Регистрация: 25.04.2012

Author24 — интернет-сервис помощи студентам

Как два блока расположить друг напрротив друга, чтобы на одной линии были, у меня вроде всё ок у других не на одном уровне..

HTML5

<div class="manage">
        <figure class="sign">
            <button type="submit" class="delete-button" style="margin-left:5px;">
                <i class="fa fa-trash" style="font-size:24px;"></i>
            </button>
            <figcaption>
                <a href="#" class="delete-button del-btn">
                    Delete
                </a>
            </figcaption>
        </figure>
 
        <figure class="sign2">
            <a class="fo-hover" href="" style="height:24px; display:inline-block; margin-left:15px;">
                <i class="fa fa-plus" style="font-size:24px;"></i>
            </a>
            <figcaption>
                <a href="" class="del-btn fo-hover">
                    Add new
                </a>
            </figcaption>
        </figure>
    </div>

CSS

.manage {
    margin-top:5px;
    float:right;
}
 
.manage figcaption {
    font-size: 16px;
}
 
.sign img {
    margin-left: 6px;
}
 
.sign {
    margin-right:20px;
    height:46px;
    float: left;
}
 
.sign2 img {
    margin-left: 11px;
}
 
.sign2 {
    height:46px;
    float: left;
}
 
.delete-button:hover {
    color:#72afd2;
}
 
.delete-button {
    color: #3c8dbc;
    height:24px;
}
 
.sign:hover .delete-button {
    cursor:pointer;
    color:#72afd2;
}
 
.sign2:hover .fo-hover {
    cursor:pointer;
    color:#72afd2;
}

стили не совсем соответсвуют реальности так как присутсвует button а в проекте бутстрап..

@cyb0rg_01 · 13.04.2017, 09:52

Сообщение от sendxt

Как два блока расположить друг напрротив друга

Если правильно понял вопрос
https://jsfiddle.net/q9Lkrd5r/

HTML5

<div class="manage">
        <figure class="sign">
            <button type="submit" class="delete-button" style="margin-left:5px;">
                <i class="fa fa-trash" style="font-size:24px;"></i>
            </button>
            <figcaption>
                <a href="#" class="delete-button del-btn">
                    Delete
                </a>
            </figcaption>
        </figure>
 
        <figure class="sign2">
            <a class="fo-hover" href="" style="height:24px; display:inline-block; margin-left:15px;">
                <i class="fa fa-plus" style="font-size:24px;"></i>
            </a>
            <figcaption>
                <a href="" class="del-btn fo-hover">
                    Add new
                </a>
            </figcaption>
        </figure>
    </div>

CSS

.manage {
    margin-top:5px;
}
 
.manage figcaption {
    font-size: 16px;
}
 
.sign img {
    margin-left: 6px;
}
 
.sign {
    margin-right:20px;
    height:46px;
    float: left;
}
 
.sign2 img {
    margin-left: 11px;
}
 
.sign2 {
    height:46px;
    float: right;
}
 
.delete-button:hover {
    color:#72afd2;
}
 
.delete-button {
    color: #3c8dbc;
    height:24px;
}
 
.sign:hover .delete-button {
    cursor:pointer;
    color:#72afd2;
}
 
.sign2:hover .fo-hover {
    cursor:pointer;
    color:#72afd2;
}

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@sendxt · 13.04.2017, 09:55 **[ТС]**

pro_100_gram, не то чтобы left >> right они рядом просто чтобы на одной линии, небыло перекоса как на фотке один ниже другово, в firefox нормально в chrome перекашивает

@mrtoxas · 13.04.2017, 10:44

sendxt, figure и figcaption тут вообще не при чем. И почему у вас иконка и надпись завернуты в разные ссылки?

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .btns {
      float: right;
    }
 
    .btns__link {
      padding: 10px;
      display: inline-block;
      vertical-align: top;
      padding: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }
    .btns__link span {
      display: block;
      margin-top: 10px;
    }
    .btns__link i {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="btns">
  <a class="btns__link" href="#">
    <i class="fa fa-trash"></i><span>Delete</span>
  </a>
  <a class="btns__link" href="#">
    <i class="fa fa-plus"></i><span>Add new</span>
  </a>
</div>
</body>
</html>

@sendxt · 13.04.2017, 12:14 **[ТС]**

mrtoxas, спасибо всё очень лаконично и эфективно)

Новые блоги и статьи
Какой локальный веб-сервер выбрать InfoMaster 19.01.2025 В современной веб-разработке локальные веб-серверы играют ключевую роль, предоставляя разработчикам надежную среду для создания, тестирования и отладки веб-приложений без необходимости использования. . .	Почему планшеты и iPad уже не так популярны, как раньше InfoMaster 19.01.2025 Эра революционных инноваций История планшетных компьютеров началась задолго до того, как эти устройства стали привычными спутниками нашей повседневной жизни. В начале 1990-х годов появились первые. . .	Как самому прошить BIOS ноутбука InfoMaster 19.01.2025 BIOS (Basic Input/ Output System) представляет собой важнейший компонент любого компьютера или ноутбука, который обеспечивает базовое взаимодействие между аппаратным и программным обеспечением. . .	Какой Linux выбрать для домашнего компьютера InfoMaster 19.01.2025 Современные реалии выбора операционной системы В современном мире выбор операционной системы для домашнего компьютера становится все более важным решением, которое может существенно повлиять на. . .	Как объединить два словаря одним выражением в Python InfoMaster 19.01.2025 В мире программирования на Python работа со словарями является неотъемлемой частью разработки. Словари представляют собой мощный инструмент для хранения и обработки данных в формате "ключ-значение". . . .	Как без исключения проверить существование файла в Python InfoMaster 19.01.2025 При разработке программного обеспечения на Python часто возникает необходимость проверить существование файла перед выполнением операций с ним. Это критически важная задача, которая помогает избежать. . .
Как определить, содержит ли строка подстроку в JavaScript InfoMaster 19.01.2025 При разработке веб-приложений часто возникает необходимость выполнять различные операции со строками, среди которых особое место занимает поиск подстрок. JavaScript предоставляет несколько встроенных. . .	Что такое метаклассы в Python InfoMaster 19.01.2025 Метаклассы в Python представляют собой один из самых мощных и одновременно сложных механизмов языка, позволяющий программистам контролировать процесс создания классов. По своей сути, метакласс. . .	Как удалить свойство из объекта JavaScript InfoMaster 19.01.2025 В современной веб-разработке объекты JavaScript играют фундаментальную роль в организации и структурировании данных. Они представляют собой контейнеры, которые хранят связанные данные и. . .	Какая разница между String и string в C# InfoMaster 19.01.2025 В языке программирования C# существует интересная особенность: для работы со строками можно использовать как String, так и string. Эта двойственность часто вызывает вопросы у разработчиков, особенно. . .	Как в Git откатить репозиторий к предыдущему коммиту InfoMaster 19.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемой частью рабочего процесса, предоставляя разработчикам мощные инструменты для управления изменениями в. . .	Как работают замыкания (closure) в JavaScript InfoMaster 19.01.2025 В мире современной веб-разработки замыкания (closures) представляют собой один из фундаментальных концептов языка JavaScript, который часто вызывает затруднения у начинающих разработчиков, но при. . .

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,163
	13.04.2017, 09:55 [ТС]	3
	pro_100_gram, не то чтобы left >> right они рядом просто чтобы на одной линии, небыло перекоса как на фотке один ниже другово, в firefox нормально в chrome перекашивает 0

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,163
	13.04.2017, 12:14 [ТС]	5
	mrtoxas, спасибо всё очень лаконично и эфективно) 0

Опции темы

Два блока с элементами на одной линии

Решение