内联元素之间的换行符

Question

在下面的代码中，我需要将a标记放在新行中并保持中心对齐。我不能改变HTML。 display:block使文本外部的可点击区域更加容易。

以下是所需结果的屏幕截图

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: inline-block;
  clear: both;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

https://jsfiddle.net/afelixj/nq7ow9eq/

Answer 1

将display:block添加到a

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: block;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

删除额外的可点击区域

div {
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a {
  color: red;
  display: inline;
}
a:after {
  content: "\a";
 white-space: pre;
}
a:before {
  content: "\a";
 white-space: pre;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

Answer 2

请参阅演示here。

只需将display: table; margin: 0 auto;添加到a代码。

请找到以下代码：

<强> HTML：

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

<强> CSS：

div {
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}

a {
  color: red;
  display: table;
  margin: 0 auto;
}

Answer 3

这正是块显示的用途：

div{
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 400px;
}
a{
  color: red;
  display: block;
  clear: both;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="">This is link in new line</a> Cumque mollitia repellat soluta voluptates molestias veniam reiciendis.
</div>

Answer 4

是显示：阻止;在这种情况下工作正常， 但它匹配网页上的所有<a>标记。 更好的解决方案是使用selectors和class属性或id来防止将新行显示为<a>的块元素（默认情况下通常为此行）。

例如

div.div_with_a_newline_by_css > a
{
  color: red;
  display: block;
  clear: both;
}

或直接标记为由类

标识的标记

a.tag_and_newlines{
  color: red;
  display: block;
  clear: both;
}

顺便说一句 这根本不是最佳解决方案，但它有效， 请记住

标记a在框模型中默认为内联：）