css - 字母间距似乎使 div 移动

Question

我正在设计一个类似表格的 div 集群。只有两行。

“表”的构建如下:

<div class="artist_meta_first_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>
<div class="artist_meta_second_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>

很简单，对吧？下面是样式:

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 190px;
      }

.artist_meta_second_row div{
        display: inline-block;
        min-width: 190px;
        vertical-align: top;
      }

我遇到的问题是第一行 div 中的文本比第二行 div 中的文本从右边开始一点。看起来第一行中几乎有一些 padding-left，但 css 代码中没有。所以经过大量的反复试验，我发现这是由于第一行的 letter-spacing: 3px; - 它似乎使第一行的 div 有点宽，导致第一行和第二行的单元格没有很好地对齐，即使我指定了宽度。

有什么方法可以正确对齐两行而不必去掉字母间距？

Answer 1

我自己找到了一种方法 - 因为我为两行内的每个 div 指定了宽度，所以我只是从第一行中的 div 的宽度中减去字母间距占用的三个像素。现在，第一行和第二行的列的开头已正确对齐。

这是工作代码:

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 182px; /* notice 185 - 3 = 182 */
      }

      .artist_meta_second_row div{
        display: inline-block;
        min-width: 185px;
        vertical-align: top;
      }