Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Полоса на всю оставшуюся ширину
Фибер Оптик  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 85
Пользователь №: 16771
На форуме: 7 лет, 10 месяцев, 6 дней
Карма:




Здравствуйте!
Бьюсь с проблемой отображения декоративной полоски на одной строке с заголовком.

Т.е есть следующее:
<h2>Каталог оборудования</h2><div class="blue-line"></div>


Идёт заголовок, а дальше в той же строке правее заголовка должна идти синяя полоска и занимать всё оставшееся пространство по ширине.

Пишу такой css:

.blue-line {
display:inline;
background:#0099ff;
height:10px;
width:100%;
}


но полоса появлятся ниже заголовка.

Если ставлю меньший процент width, то всё ок, но ведь у меня будут заголовки меньшей ширины, и тогда эта полоска будет не на всю оставшуюся ширину.

Кстати, ширина у меня ограничена 1000px.

Помогите, пожалуйста, с решением.

Спасибо
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11789
Пользователь №: 23195
На форуме: 6 лет, 4 месяца, 16 дней
Карма: 429

Трезвый :
7 лет, 3 месяца, 17 дней


<div class="wrapper">
<h2>
Каталог оборудования</h2><div class="blue-line"></div>
</div>

.wrapper {
display: flex;
align-items: center;
}

.wrapper h2 {
flex-shrink: 0;
margin-right: 20px;
}

.wrapper .blue-line {
background: #0099ff;
height: 10px;
width: 100%;
}


https://jsfiddle.net/hcx4s0qk/


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Фибер Оптик  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 85
Пользователь №: 16771
На форуме: 7 лет, 10 месяцев, 6 дней
Карма:




Круто, спасибо огромное.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса