在不使用 HTML 表的情况下对齐 css 中的键冒号值数据？

Question

我有以下要显示的数据。 理想情况下，我希望键和值左对齐，中间用冒号分隔。

我希望结果如下所示：

key1  : value1
key2  : value2
keyAbc: Value Abc
key_N : value N

不如下所示：

key1: value1
key2: value2
keyAbc: Value Abc
key_N: value N

如何在 CSS 或 SCSS 中执行此操作，而不使用 HTML 表？

Answer 1

您可以使用网格，使列占据内容的最大宽度。

此代码片段将冒号添加到伪元素中，因为它们似乎只是视觉线索而不是数据的一部分。

当然，您可能需要添加一些填充来满足您的特定要求。

.table {
  display: grid;
  grid-template-columns: max-content max-content;
}

 .table > *:nth-child(even)::before {
   content: ":";
}
    

<div class="table">
<div>key1</div>
<div>value1</div>
<div>key2222222</div>
<div>value2</div>
<div>key3</div>
<div>value3</div>
</div>

Answer 2

如果您使用 div 结构，则可以使用 display: flex 并执行如下操作：

.css-table {
  display: flex;
}

.key {
  width: 10%;
}

.val::before {
  content: ': ';
}

<div class="css-table">
  <div class="key">key1</div>
  <div class="val">value1</div>
</div>
<div class="css-table">
  <div class="key">key2111</div>
  <div class="val">value2</div>
</div>
<div class="css-table">
  <div class="key">key3</div>
  <div class="val">value3</div>
</div>
<div class="css-table">
  <div class="key">key4</div>
  <div class="val">value4</div>
</div>

如果您不想指定宽度，则需要使用 JavaScript 来计算宽度并内联应用它。

let maxWidth = 0;
  
// Calculate maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
  cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
    let currWidth = keyEl.clientWidth;

    if (currWidth > maxWidth) {
      maxWidth = currWidth;
    }
  });
});


// Apply maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
  cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
    keyEl.style.width = maxWidth + 'px';
  });
});

.css-table {
  display: flex;
}

.val::before {
  content: ': ';
}

<div class="css-table">
  <div class="key">key1</div>
  <div class="val">value1</div>
</div>
<div class="css-table">
  <div class="key">key2111</div>
  <div class="val">value2</div>
</div>
<div class="css-table">
  <div class="key">key3</div>
  <div class="val">value3</div>
</div>
<div class="css-table">
  <div class="key">key4</div>
  <div class="val">value4</div>
</div>

Answer 3

只需使用内联块并确保主 DIV 的子级也获得它，它就会根据最宽的宽度自动调整大小，就像表格一样。不需要弯曲。

 
.inline-block {
display: inline-block;
}

.inline-block > div {
margin: 2px;
padding: 1px; 
}


    

<div class="inline-block">
<div>key1</div>
<div>keykey2</div>
<div>key3</div>
</div>
    
<div class="inline-block">
<div>:</div>
<div>:</div>
<div>:</div>
</div>

<div class="inline-block">
<div>value1</div>
<div>value2</div>
<div>Value3</div>
</div>