Question

这是一个简单的CSS问题，但我还不知道。我有几个带有背景颜色的p标签，我的问题是背景扩展到每个标签的屏幕的100％，我只是想包装单词，创建效果作为buttoms或block。我不明白为什么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，则它们只会占用文本的空间。然后，您需要处理按钮的内联定位。

Answer 2

更新小提示检查this link

- 添加了显示：内联块样式到＆＃39; P＆＃39;标签
- 为.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;**

}

Answer 3

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>

Answer 4

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

.process_wrapper_mobile .inter_mobile_process p{
float:left
}

CSS - “p”标签背景不包装

4 个答案: