Question

标题几乎是不言自明的......我有这个html div元素，它看起来并不像我想要的那样，当我调整屏幕大小时会发生这种情况：

  <div class='serveMessage'><strong>Fun fact:</strong>&nbsp;over 1,259,468 american students fail every year!</div>

我尝试删除＆amp; _nbsp;但它仍然无法运作:(

这是我希望它看起来，但用粗体文字： https://imgur.com/a/2u0GS

这是强大的标签，而不是它的样子： https://imgur.com/a/OGF9S

涉及到css！

.content .serveMessage {
  margin: 0 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #63827b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  text-align: center; }

感谢您的协助！

Answer 1

text run是一个有效的flex项，因此如果未将强标记和以下文本放在公共父级中运行，则Flex容器中有两个flex items：

一个<strong>元素
文字运行

文本运行基本上是一个文本节点，浏览器必须将其解释为一个单元，但它没有自己的语义或容器元素。

您应该可以通过执行以下操作之一来解决此问题：

将.serveMessage的显示更改为flex以外的其他内容（例如block）或
在.serveMessage中添加包含元素，以便文本运行不会与<strong>一起展开

第一个似乎更合适，但如果你有一些令人信服的理由在其他地方展示这个类，那么第二个是有意义的，这是一个孤立的解决方法。

强修改器将h1划分为网格

1 个答案: