Question

我正在创建一个联系人列表，旁边带有人们的姓名，姓名和电子邮件，但是当我加载预览时，有一个额外的休息时间，就是我从未添加过。

我尝试移动
标签，并更改链接的位置。

.contacts-header {
  text-align: center;
}

.contacts-text {
  text-align: left;
  padding: 10px;
  font-size: 14px;
}

.subhead {
  font-size: 18px;
}

<h1 class="contacts-header">Association Board 2019</h1>
<div class="contacts-text">
  <p class="subhead"><b>Association Officers</b></p>
  <br>
  <p><em>President:</em> Kim W</p><a href="mailto: ********@gmail.com">(********@gmail.com)</a>
  <br>
  <p><em>Treasurer:</em> Fritz A</p><a href="mailto: ********@gmail.com">(********@gmail.com)</a>

当我打开网页时，此人的姓名后面有一个中断，在下一行显示链接。请帮忙！（很抱歉，答案很简单，我才开始编写代码。）

Answer 1

直接回答您的问题：

那是因为您使用来包含名称。

被称为paragraph element。不用太讲究技巧，段落元素的默认样式之一是：

display: block;

具有display: block的元素将自动arranged vertically，从而换行。

要更改此行为，只需用内联显示样式覆盖块显示样式，例如：

display: inline;

工作示例：

.contacts-header{
  text-align: center;
}
.contacts-text{
  text-align: left;
  padding: 10px;
  font-size: 14px;
}
.subhead{
  font-size: 18px;
}

/* THIS LINE */
p:not(.subhead) {
  display: inline;
}

<h1 class="contacts-header">Association Board 2019</h1> 
<div class="contacts-text">
  <p class="subhead"><b>Association Officers</b></p>
  <br>
  <p><em>President:</em> Kim W</p>
  <a href = "mailto: ********@gmail.com">(********@gmail.com)</a>
  <br>
  <p><em>Treasurer:</em> Fritz A</p>
  <a href = "mailto: ********@gmail.com">(********@gmail.com)</a>
</div>

PS

当然，更合适的方法是在电子邮件之后的段落末尾包裹结尾的<a>标签。

代替此：

<p><em>President:</em> Kim W</p><a href = "mailto: ********@gmail.com">(********@gmail.com)</a>

执行以下操作：

<p><em>President:</em> Kim W <a href = "mailto: ********@gmail.com">(********@gmail.com)</a></p>

Answer 2

您的段落结束标记破了行。试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <h1 class="contacts-header">Association Board 2019</h1> 
    <div class="contacts-text">
        <p class="subhead"><b>Association Officers</b></p>
    <br><p><em>President:</em> Kim W<a href = "mailto: ********@gmail.com"> (********@gmail.com)</a></p>
    <br><p><em>Treasurer:</em> Fritz A<a href = "mailto: ********@gmail.com"> (********@gmail.com)</a></p>
</body>

Answer 3

主要问题是您的AMD64 SysV ABI标签，因此删除您的 标记和HTML的一些小的更改都可以正常工作

。

HTML：

<p></p>

CSS

<h1 class="contacts-header">Association Board 2019</h1>
<div class="contacts-text">
<p class="subhead"><b>Association Officers</b></p>
 <br>
  <div>
     <em>President:</em> Kim W
     <a href="mailto: ********@gmail.com">(********@gmail.com)</a>
  </div>
  <div>
     <em>Treasurer:</em>Fritz A
     <a href="mailto: ********@gmail.com">(********@gmail.com)</a>
 </div>

这是可以通过

进行访问的有效示例。

https://jsfiddle.net/0wh4njtf/4/

如何修复文本中的自动换行符

3 个答案:

直接回答您的问题：

PS