Question

在作为段落的父元素内部，有文本和几个锚链接。这些锚链接的显示设置为inline-block，视觉效果如下所示： https://imgur.com/a/aLR3Q

现在，如果我将显示更改为内联，结果如下所示： https://imgur.com/a/TFof9

我的问题是，为什么将锚点的显示设置为inline-block而不仅仅是inline会导致这种情况，让我们只说＆＃34;软线断线＆＃34; ？因为我认为就换行而言，两个显示器都以相同的方式起作用，并且根本不会破坏。

代码的Codepen链接：https://codepen.io/Kestvir/pen/zpvmYV

父元素的代码：

.footer__copyright {
    border-top: 1px solid #777;
    padding-top: 2rem;
    width: 80%;
    float: right;
}

锚点的代码：

footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s;
}

锚点是：

<a href="#" class="footer__link">Jonas Schmedtmann</a>

和

<a href="#" class="footer__link">Advanced CSS and Sass</a>

Answer 1

发生换行是因为内联块不能像普通内联元素一样跨多行分割。它只是一个内联显示的整个“块单元”。如果整个单位不合适，那么它将全部包裹到下一行。

在换行符方面的内联块和内联元素

1 个答案: