0

解決できない単語間隔の問題があります。

Webページはwww.c5d.co.uk/captaintwo.phpです。

上の画像の下の単語の間隔はばかげているように見えます。しかし、私が見る限り、CSSは同じです。

私は何が欠けていますか？Wrigleyの後に/pタグを付けると、正常に機能しますが、開始pタグがないため、検証に失敗します。

関連するHTMLとCSSは次のとおりです。

.captain{word-spacing:185px;display:inline;} 
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }  



  <img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
  <img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
  <p class="pres">
  <br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
  <img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
  <img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
  <p class="pres">
  <br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
4

2 に答える 2

0

<br>時代遅れです。<br />代わりに自動閉鎖を使用してください。名前は何か（p、span、h3、何か）でラップする必要があります。2つのスタイル（1つはインライン（ドキュメント内）、もう1つは#headerにアタッチ）があり、そこに約500pxのスペースが追加されています。そのため、大きなギャップがあります。

自分で簡単にすることを検討してください。1つのクラスを使用して、オブジェクトの各TYPEを定義します。

#people {
  styles for container div
}
.box {
  styles for the individual boxes
}
.photo {
  styles for <img>
}
.title {
  styles for names of people
}

次に、クラスを適切なアイテムに適用します。

<div id="people"> 
  <div class="box">
    <img src="path/image.jpg" class="photo" />
      <h3 class="title">Position, name</h3>
  </div>
  <div class="box">
    <img src="path/image.jpg" class="photo" />
      <h3 class="title">Position, name</h3>
  </div>
  etc...
</div>
于 2013-02-28T05:41:38.630 に答える
0

次の変更を行います。

.pres {
    /* display: inline (remove) */
    display: inline-block;
    width: 270px;
    text-align: center;
}

.captain {
    /* display: inline (remove) */
    display: inline-block;
    width: 270px;
    text-align: center;
}
于 2013-02-28T05:44:53.777 に答える