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

Question

我有以下数据要显示。理想情况下，我希望 keys 和 values 左对齐，中间用 colons 分隔。

我希望结果如下所示：

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

Answer 1

如果您使用的是 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 2

只需使用 inline-block 并确保主 DIV 的子级也得到它，它会根据最宽自动调整大小，就像 table 一样。不需要弹性。

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

Answer 3

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

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

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

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

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

Aligning key colon value data in css without using HTML table?

html

css

sass