Такая же ширина с Flexbox
У меня есть следующая часть. Я уже пробовал это делать, но пока безуспешно.
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 1</span>
</div>
<span class = "label-text">Small Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 2</span>
</div>
<span class = "label-text">longer Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 3</span>
</div>
<span class = "label-text">Soo long Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 4</span>
</div>
<span class = "label-text">Text</span>
</label>
</div>
</div>
</div>К сожалению, я не могу изменить структуру. JS, использующих эту структуру, ооочень много. Но я могу редактировать CSS. Я абсолютно не разбираюсь в гибкой коробке.
Текст в элементах span.label-text может быть любым, но не может быть длиннее половины его родительской ширины.
Это плагин, который используется во многих частях. Я не могу просто определить фиксированную ширину.
Можно ли сделать все элементы span.label-text такими же широкими, как тот, у которого самый длинный текст, без изменения html или использования для него JS?
Улучшение производительности загрузки с помощью 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
1
150
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Вы можете определить ширину этого текста надписи.
.container {
width: 600px;
}
.label-text {
width: 150px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 1</span>
</div>
<span class = "label-text">Small Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 2</span>
</div>
<span class = "label-text">longer Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 3</span>
</div>
<span class = "label-text">Soo long Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 4</span>
</div>
<span class = "label-text">Text</span>
</label>
</div>
</div>
</div> Ответ принят как подходящий
Поскольку вы используете Flexbox, вы можете поэкспериментировать с flexзначения обоих гибкие элементы элемента .item, например:
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
flex: 2; /* added; makes it twice as wide as the .label-text */
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
flex: 1; /* added */
align-items: center;
justify-content: center; /* added */
}<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 1</span>
</div>
<span class = "label-text">Small Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 2</span>
</div>
<span class = "label-text">longer Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 3</span>
</div>
<span class = "label-text">Soo long Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 4</span>
</div>
<span class = "label-text">Text</span>
</label>
</div>
</div>
</div>Извините, похоже, я забыл об этом из описания. Я не могу просто добавить фиксированную ширину, потому что это плагин в более крупной системе. И текст может быть любым. Заказчик хочет, чтобы все этикетки были такой же ширины, как и этикетка с более длинным текстом.
—
18.04.2018 08:45
Невозможно использовать чистый CSS, потому что не все элементы связаны между собой, для этого потребуется JS / jQuery.
—
18.04.2018 08:47
Вот пример jQuery с проверкой максимальной ширины текст надписи во всех элементах и применением ширины ко всем текст надписи.
var width =0
jQuery('.item').each(function() {
if (width <= jQuery(this).children(".label-text").outerWidth())
{
width = jQuery(this).children(".label-text").outerWidth();
}
});
jQuery(".label-text").css('width',Math.ceil(width));body { margin:0; padding:0;}
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 1</span>
</div>
<span class = "label-text">Small Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 2</span>
</div>
<span class = "label-text">longer Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 3</span>
</div>
<span class = "label-text">Soo long Text</span>
</label>
</div>
</div>
<div class = "row">
<div class = "col-sm-7 col-xs-12">
<label class = "item">
<div class = "selector">
<input type = "radio" />
<span>Option 4</span>
</div>
<span class = "label-text">Text</span>
</label>
</div>
</div>
</div>Другие вопросы по теме
Переход и преобразование не работают
Плагин Datatables работает с таблицей из четырех строк, но не работает при добавлении пятой строки
Хотите выровнять глификон и текстовые поля ввода в одну строку
Как связать иконку и текст вместе?
Проблема с печатью таблиц данных - лишняя линия перед разрывом страницы
CSS Flex растягивает ссылки
Как установить переменную высоту на основе различных разрешений экрана с помощью css и javascript
Селектор css не дает желаемых результатов
Прокрутка overflow-x не работает
Сделайте dom-repeat доступным с помощью TABS
Похожие вопросы
Переход и преобразование не работают
Как запустить код в Android на основе HTML
Как получить значения всех отмеченных флажков в Google App Script
Как применить eventListener ко всем классам?
Как получить доступ к значениям, возвращаемым хранимой процедурой, в скрытом коде
Почему не работает транслитерация, когда я выбираю второе поле ввода?
Плагин Datatables работает с таблицей из четырех строк, но не работает при добавлении пятой строки
Как инициализировать javascript после загрузки содержимого * ngIf в Angular 4
Как убедиться, что кнопка «Назад» переместит меня в раздел, в котором я был до того, как щелкнул изображение?
Как я могу преобразовать из изображения, вводимого пользователем, в URL-адрес в реакции
Вам нужно применить ширину в классе ".item> .label-text".