1

私はdivのテーブルのようなクラスターを設計しています。行は2つだけです。

「テーブル」は次のように構成されています。

<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のテキストが、2番目の行のdivのテキストよりも少し右側から始まることです。最初の行にパディングが残っているように見えますが、cssコードにはありません。試行錯誤の末、最初の行が原因であることがわかりましたletter-spacing: 3px;。最初の行のdivが少し広くなり、1行目と2行目のセルが適切に配置されていないようです。 、幅を指定したのに。

文字の間隔をなくすことなく、2つの行を適切に整列させる方法はありますか？

4

2 に答える 2

0

私は自分で方法を見つけました-2行内の各divの幅を指定しているので、最初の行のdivの幅から文字間隔が奪う3ピクセルを差し引いただけです。これで、1行目と2行目の列の先頭が正しく配置されます。

これは動作するコードです：

.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 に答える