Как адаптивно использовать элементы позиции в div на 90% (или около того) ширины

Как бы вы расположили элементы в относительно позиционированном div и держали бы их на одинаковом расстоянии друг от друга, не выходя за пределы поля? У меня есть относительно позиционированный div, и внутри него находится div (nameTabs), занимающий 100% ширины. Внутри этого div есть taskstabtext и tasksaddbox. Текст вкладки «Задачи» располагается на месте и остается там. Кнопки нет. Каким будет самый чистый способ разместить эти два элемента в гибком адаптивном div? Спасибо

<html>
<body>

<div id = "box" style = "display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class = "nameTabs tasksTab">
                            <div class = "tasksTabText">
                                <p class = "tasksBtnText">Name</p>
                            </div>
                            <div class = "tasksAddBox">
                                <p class = "tasksAddBtn">Last</p>
                            </div>
                        </div>
</div>
</div>
</body>
</html>

ССЫЛКА - https://jsfiddle.net/9rqd9ot9/15/

display inline:block; ??

— 11.03.2018 20:51

Они оба уже этим пользуются.

— 11.03.2018 22:41

вы знаете, что это синтаксическая ошибка?

— 11.03.2018 23:09

html css

11.03.2018 20:41

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Я понял. Для тех, у кого есть подобная проблема, просто используйте justify-content:space-between;rule. Он разделяет эти два, и затем вы можете установить их поля от края.

LINK- https://jsfiddle.net/9rqd9ot9/38/

12.03.2018 05:06