如何在css

Question

我有四个显示数字的div，我想显示这些数字下面的单词。我在css中尝试使用p标记white-space: pre;，但它仍然不起作用：

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
}

p {
  white-space: pre;
}

<div id="c">
  <span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text 3</span><span class='cnum'>5 Text 4</span>
</div>

Answer 1

HTML

<div id="c">
   <div class='cnum'>27 <br/>Text1</div>
   <div class='cnum'>10 <br/>Text2</div>
   <div class='cnum'>40 <br/>Text 3</div>
   <div class='cnum'>5 <br/>Text 4</div>
 </div>

CSS

#c{
    padding-top:30px;
    padding-bottom:30px;
}
.cnum{
    background: black;
    border-radius: 5px;
    color: #fff;
    padding: 15px;
    margin:5px;
    font-size:20px;
    max-Width :100px;
    float :left
 }

Heres a CodePen

Answer 2

如果您无法编辑HTML，请使用word-spacing进行解决方法。显然这种方法非常有限......

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
  display: inline-block;
  width: 100px;
  word-spacing: 100px; 
}

<div id="c">
  <span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text3</span><span class='cnum'>5 Text4</span>
</div>

Answer 3

我只是根据层次结构分离元素，以便我可以应用样式。如果您观察到保留span标记，但可以用块元素替换它们。

我建议您了解内联和阻止HTML元素以及如何将它们相互转换。

我希望我做出了贡献。

＆＃13;

＆＃13;

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
  display: inline-block;
  text-align: center;
}

.cnum span{
  display: block;
}

p {
  white-space: pre;
}

＆＃13;

<div id="c">
  <div class="cnum">
    <span>27</span>
    <span>Text 1</span>
  </div>
  <div class="cnum">
    <span>10</span>
    <span>Text 2</span>
  </div>
  <div class="cnum">
    <span>40</span>
    <span>Text 3</span>
  </div>
  <div class="cnum">
    <span>5</span>
    <span>Text 4</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果您可以编辑html，则可以执行以下操作，另外使用伪选择器result.getValue({ name: "salutation", join: "contact" }); 以不同的方式设置数字

::first-line

#c {
  padding-top: 30px;
  padding-bottom: 30px;
}

.cnum {
  background: black;
  border-radius: 5px;
  color: #fff;
  padding: 15px;
  margin: 5px;
  font-size: 20px;
}

.cnum::first-line {
  font-size: 30px;
  color: yellow;
}