Question

我有一个单词间距问题，我似乎无法解决。

网页是www.c5d.co.uk/captaintwo.php

顶部图片下的单词间距看起来很荒谬。但据我所知，CSS是一样的。

我错过了什么？如果我在箭牌之后放一个/ 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

Answer 1

<br>已过时。请使用自动关闭<br />。名称应包含在某些内容中（p，span，h3，某些内容）。有两种样式（一个内联（在文档内）和一个附加到#header），在那里添加大约500px的空间。这就是为什么存在很大的差距。

考虑让自己更容易..使用1个类来定义每个对象的类型。

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

Answer 2

进行以下更改：

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

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

字间距查询

2 个答案: