1

我正在设计一个类似表格的 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 中的文本更靠右。第一行几乎看起来有一些填充，但在 css 代码中没有。所以经过大量的试验和错误后，我发现这是由于letter-spacing: 3px;第一行中的 - 它似乎使第一行中的 div 有点宽，导致第一行和第二行中的单元格没有很好地对齐，即使我指定了宽度。

有什么办法可以正确对齐两行而不必摆脱字母间距？

4

2 回答 2

0

我自己找到了一种方法 - 因为我指定了两行内每个 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;
      }
于 2012-11-28T02:45:34.420 回答
0

完全复制粘贴，应该可以解决：

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

演示：http: //jsfiddle.net/FdRt5/

在这里查看原因：如何删除内联块产生的额外边距空间？

于 2012-11-28T02:46:30.753 回答