CSS - “p”标签背景不换行答案

【问题标题】：CSS - "p" tag background does not wrappCSS - “p”标签背景不换行
【发布时间】：2015-01-08 03:37:50
【问题描述】：

这是一个简单的 CSS 问题，但我还不知道。我有几个带有背景颜色的 p 标签，我的问题是背景在每个标签中都延伸到屏幕的 100%，我只想包装单词，将效果创建为按钮或块。我不明白为什么 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%;
}

请检查我的小提琴。

谢谢！

【问题讨论】：

标签： css position width centering word-wrap

【解决方案1】：

p 是块级元素，您可以在 p 内添加一个内联的 span，并在其周围添加您的样式。但是，您实际上并不需要 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>

【讨论】：

非常感谢，非常感谢您花时间解释这一切。现在居中并包裹！
@RenzoCJ 我改进了我的答案，看看

【解决方案2】：

更新小提琴检查this link

--为'P'标签添加了显示：内联块样式
-- 为 .process_wrapper_mobile .inter_mobile_process 增加了 10% 的边距

更新代码

   .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;**

}

【讨论】：

文本不再居中
感谢 notiftying.updated 到 display:inline-block。文本现在居中。

【解决方案3】：

P元素是块元素，默认扩展整个宽度。如果将显示更改为display: inline-block，它们只会占用文本空间。然后你需要处理按钮的内联定位。

【讨论】：

此更改本身会导致文本不再居中。
它对我来说始终居中

【解决方案4】：

将 float:left 添加到 .process_wrapper_mobile .inter_mobile_process p

.process_wrapper_mobile .inter_mobile_process p{
float:left
}

【讨论】：