css - 字间距查询

标签 css

我有一个我似乎无法解决的字间距问题。

网页是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

最佳答案

进行以下更改:

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

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

关于css - 字间距查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15128219/

相关文章:

javascript - 如何在基于 Web 的应用程序中提供剪切、复制、粘贴、撤消、重做、删除按钮的功能

html - 使图像缩放以在适合 flexbox 时保持其纵横比

html - 在悬停时操纵div的位置

javascript - 如何同时在多个 div 上运行一个函数?

html - 将 Div 排列成字母

html - 创建一条中间有圆圈的线

jquery - 引导轮播的进度条

javascript - 制作一个关闭按钮,在图像上显示时间后

jquery - 显示 : none on container element breaks jquery absolute positioning calculation childrens child elements

javascript - Android:如何在点击时启动系统放大镜