使用 display:table-cell; 实现冒号居中对齐

[iotale]

类似于表单可以将表单项名称根据后面的冒号对其。效果如下：

重点是 CSS 样式，和 React 无关，只是方便渲染

结构

const mockData = [
  {name: '1号窗口', value: '001'},
  {name: '11号窗口', value: '003'},
  {name: '91号窗口', value: '——'},
  {name: '471号窗口', value: '178'},
  {name: '33号窗口', value: '999'},
  {name: '2号窗口', value: '061'},
];
// ...
function App() {
  // ...
  return (
    <div className="box">
       {
         mockData.map(item => (
             <div key={item.name} className="item">
               <div className="name">{item.name}:&nbsp;</div>
              <div className="value">{`${item.value}号客户`}</div>
            </div>
        ))
      }
    </div>
  );
}

样式

.item {
  display: table-row;
}
.name {
  display: table-cell;
  text-align: right;
}
.value {
  display: table-cell;
}

很基础的实现，但是效果很好，代码也很简单。
需要注意的是要 显式 的给类名为 item 的元素设置 display: table-row;。否 text-align: right; 不生效。