代码之家 › 专栏 › 技术社区 › Faye D.

flex中的标签扰乱了盒子的布局

flexbox css

Faye D. · 技术社区 · 2 年前

为什么会出现以下情况?超链接不能与其他文本内联显示吗?

.test {
    padding: 25px;
    display: flex;
    height: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.7;
    align-items: center;
}

<div class="test">No results found. Looks like you may need some expert advice from our Customer Care team! Please <a href="https://ggogle.com">contact us</a> or check your selections.</div>

1 回复 | 直到 2 年前

mmirbekian 2 年前

只需用“p”标记将文本包装即可。因为没有它就像光秃秃的。它可能会分崩离析。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>
<style>
  .test {
    padding: 25px;
    display: flex;
    height: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.7;
    align-items: center;
  }
</style>

<body>

  <div class="test">
    <p>No results found. Looks like you may need some expert advice from our Customer Care team! Please <a href="https://ggogle.com">contact us</a> or check your selections.</p>
  </div>

</body>

</html>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前