CSS - фон «p» не обертывает

Question

Это простой вопрос CSS, однако у меня пока нет подсказки. У меня есть несколько p-тегов с цветом фона, моя проблема заключается в том, что фон распространяется на 100% экрана в каждом теге, я просто хочу обернуть слова, создавая эффект как бастомы или блоки. Я не понимаю, почему фон p подходит для всей ширины.

Fiddle: Exact example HERE

<div class="process_wrapper_mobile"> 
    <div class="inter_mobile_process"> 
    <p>Interview</p> 
    </div> 
    <div class="inter_mobile_process"> 
    <p>Data reception</p> 
    </div> 
    <div class="inter_mobile_process"> 
    <p>Design</p> 
    </div> 

CSS:

.process_wrapper_mobile { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: auto; 
    background-color: #CCC; 
} 

.process_wrapper_mobile .inter_mobile_process { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: auto; 
    margin-bottom: 3%; 
} 
.process_wrapper_mobile .inter_mobile_process p { 
    text-align: center; 
    color: #fff; 
    font-size: 0.9em; 
    background-color: #333; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 3% 5%; 
} 

Пожалуйста, проверьте мою скрипку.

Спасибо!

Answer 1

p является элемент уровня блока, вы можете добавить span, который встроенный в p, и добавьте свой стиль вокруг этого. Тем не менее, вы на самом деле не нужен p, просто span

.process_wrapper_mobile { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #CCC; 
 
} 
 
.process_wrapper_mobile .inter_mobile_process { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 3%; 
 
    text-align: center; /* Move this here from the p */ 
 
} 
 
/* Make the p into a span, it's not a paragraph */ 
 
.process_wrapper_mobile .inter_mobile_process span{ 
 
    padding: 3% 5%; 
 
    display: inline-block; 
 
    color: #fff; 
 
    font-size: 0.9em; 
 
    background-color: #333; 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 10px; 
 
}

<div class="process_wrapper_mobile"> 
 
    <div class="inter_mobile_process"> 
 
     <span>Interview</span> 
 
    </div> 
 
    <div class="inter_mobile_process"> 
 
     <span>Data reception</span> 
 
    </div> 
 
    <div class="inter_mobile_process"> 
 
     <span>Design</span> 
 
    </div> 
 
</div>

Answer 2

Добавить поплавок: слева .process_wrapper_mobile .inter_mobile_process P

.process_wrapper_mobile .inter_mobile_process p{ 
float:left 
} 

Answer 3

Р элемент представляет собой блочный элемент, который проходит по всей ширине по умолчанию. Если вы измените отображение на display: inline-block, они будут занимать место только текста. Затем вам нужно работать с встроенным позиционированием кнопок.

Answer 4

Обновление скрипку проверка this link

--Added дисплей: встроенный блок стиль тега 'P'
--Added краю дна 10% до .process_wrapper_mobile .inter_mobile_process

обновленный код

.process_wrapper_mobile .inter_mobile_process { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: auto; 
    **margin-bottom: 10%;** 
} 

.process_wrapper_mobile .inter_mobile_process p { 
    text-align: center; 
    color: #fff; 
    font-size: 0.9em; 
    background-color: #333; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 3% 5%; 

    **display:inline-block;** 

}