Question

我想创建如下内容：

我使用HTML创建了示例（https://codepen.io/anon/pen/bvOPGE）：

<ul>
  <li><span>30</span>days</li>
  <li><span>24</span>hours</li>
  <li><span>60</span>minutes</li>
</ul>

以下CSS：

ul {
  list-style: none;  
}

ul li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}

ul li span {
  font-size: 32px;
  display: block;
}

问题是如何添加＆＃34;：＆＃34;与数字30,24和60一致。

我不需要保留ul / li标记。这似乎是逻辑......

Answer 1

您可以在div内为其内容创建一个li元素，然后在元素之间使用:after伪元素作为:。您也可以使用position: absolute从正常流程中删除文本，以便:与numbers一致。

＆＃13;

ul {
  list-style: none;
  display: flex;
  align-items: center;
}
ul li {
  display: flex;
  align-items: center;
}
ul li > div {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  padding: 0 20px;
  position: relative;
}
ul li:not(:last-child):after {
  content: ':';
  font-size: 30px;
}
ul li span:first-child {
  font-size: 60px;
}
ul li span:last-child {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

＆＃13;

<ul>
  <li><div><span>30</span><span>days</span></div></li>
  <li><div><span>24</span><span>hours</span></div></li>
  <li><div><span>60</span><span>minutes</span></div></li>
</ul>

＆＃13;

或者您可以使用HTML结构并在:after元素上添加span伪元素。

＆＃13;

ul {
  list-style: none;  
  display: flex;
}
ul li {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
ul li span {
  font-size: 60px;
  display: block;
  position: relative;
  margin: 0 40px;
}
ul li:not(:last-child) span:after {
  content: ":";
  font-size: 30px;
  top: 50%;
  margin-left: 40px;
  transform: translateY(-50%);
  position: absolute;
}

＆＃13;

<ul>
  <li><span>30</span>days</li>
  <li><span>24</span>hours</li>
  <li><span>60</span>minutes</li>
</ul>

＆＃13;

Answer 2

您可以将冒号作为li元素插入其他li之间，使其成为内联块，其字体大小与数字vertical-align: top;相同：

ul {
  list-style: none;  
}

ul li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
}
ul li span {
  font-size: 32px;
  display: block;
}

<ul>
  <li><span>30</span>days</li>
  <li class="colon">:</li>
  <li><span>24</span>hours</li>
  <li class="colon">:</li>
  <li><span>60</span>minutes</li>
</ul>

如果您希望冒号进一步向上，请将position: relative应用到他们的li容器，然后使用负top值将其移动：

ul {
  list-style: none;  
}

ul li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  position: relative;
  top: -4px;
}
ul li span {
  font-size: 32px;
  display: block;
}

<ul>
  <li><span>30</span>days</li>
  <li class="colon">:</li>
  <li><span>24</span>hours</li>
  <li class="colon">:</li>
  <li><span>60</span>minutes</li>
</ul>

Answer 3

我会在<span>代码

之间添加<li>个冒号

<ul>
  <li><span>30</span>days</li>
  <span>:</span>
  <li><span>24</span>hours</li>
  <span>:</span>
  <li><span>60</span>minutes</li>
</ul>

并使用flexbox layout

设置整体风格

ul {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

ul > li {
  text-align: center;
  text-transform: uppercase;
  width: 80px;
  display:flex;
  flex-direction:column;
}

ul > span, ul > li > span {
   font-size:32px;
}

在https://codepen.io/anon/pen/WzLqzO

中查看该动作

Answer 4

@Johannes的答案看起来应该有效，但我想我可以使用::after选择器提供替代方案：

ul {
  list-style: none;  
}

ul li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  position: relative;
  top: -4px;
}
ul li span {
  font-size: 32px;
  display: block;
}

// here is the part that I added
li span::after {
  content: ":";
  position: absolute;
  margin-left: 25px;
}
li:last-child span::after {
  content: "";
}

这是JSFiddle

垂直对齐冒号与数字

4 个答案: