CSS - "p"标签背景不包装

Question

这是一个简单的CSS问题,但我还没有任何线索.我有几个带有背景颜色的p标签,我的问题是背景扩展到每个标签的屏幕的100%,我只是想包装单词,创建效果作为buttoms或b​​lock.我不明白为什么p背景会达到所有宽度.

小提琴:这里的确切示例

<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元素是块元素,默认情况下扩展整个宽度.如果将显示更改为 display: inline-block,则只会占用文本的空间.然后,您需要处理按钮的内联定位.