покрытие span tag охватывает всю ширину div

У меня есть следующая структура для html: -

<div>
  
    Wherever
  
</div>

Если я хочу, чтобы span охватывал всю ширину div, как я могу сделать это в chrome?

Я попытался использовать css

span{
  background:#FFF;
  width:100%;
}

Он работает в firefox и т. Д., Но не в хроме.

17
nl ja de
Почему бы не удалить span и просто стиль div?
добавлено автор dotty, источник
Вы можете попробовать установить display: block; . Но я не думаю, что элемент span действительно семантически корректен для этого задания.
добавлено автор w00, источник

4 ответы

span elements are inline. Inline elements adjust their width automatically and ignore your width: expressions.

Сделайте его блочным:

span {
    display: block;
}

But then it's basically just a <div>.

40
добавлено

Существует два способа решения проблемы.

Поскольку теги span изменяют свою ширину в соответствии с содержимым в ней. Поэтому для назначения ширины этого тега мы будем использовать float left с шириной.

span{
 background:#FFF;
 width:100%;
 float: left;
}

secod - использовать блок отображения с кодом

 span{
 background:#FFF;
 width:100%;
 display: block;
}
2
добавлено
ширина: 100% очень важно. Если бы я мог, я бы отталкивал тебя.
добавлено автор Esther, источник

Изменить CSS CSS:

span {
display: block;
}
1
добавлено

Попробуй это:

div{
    padding:0px;
}
span{
    background:#FFF;
    width:100%;
}
1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)