小编Ren*_* CJ的帖子

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

这是一个简单的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>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud)

请检查我的小提琴.

谢谢!

css position width word-wrap centering

0
推荐指数
1
解决办法
215
查看次数

标签 统计

centering ×1

css ×1

position ×1

width ×1

word-wrap ×1