将冒号与数字垂直对齐 [英] Vertical align colon with numbers

问题描述

我想创建以下内容:

我创建了示例( https://codepen.io/anon/pen/bvOPGE)和HTML:

I created the example (https://codepen.io/anon/pen/bvOPGE) with HTML:

<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;
}

问题是如何在数字30、24和60内联添加:".

The problem is how to add ":" inline with the numbers 30, 24 and 60.

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

I do not need keep the ul/li markup. It just seemed logic ...

推荐答案

您可以在 li 内创建一个 div 元素作为其内容，然后使用:after伪元素，用于元素之间的:.同样，您也可以使用 position:absolute 从正常流程中删除文本，以使:与数字保持一致.

You could make one div element inside li for its content and then use :after pseudo-element for : between elements. Also you could take text out of normal flow with position: absolute so that : is in line with numbers.

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%);
}

<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>

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

Or you could use your HTML structure and add :after pseudo-element on span elements.

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;
}

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

这篇关于将冒号与数字垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！