html - CSS Flex 拉伸(stretch)链接

Question

所以我正在学习更多关于使用 CSS flex 而不是使用内容的静态定位的知识。但是，我已经定义了我的链接样式以及粗体样式。我的猜测是它正在适应其中的容器(使用 flex 功能)，这就是为什么它会延伸到它所在容器的大小。我现在的问题是，我该如何解决这个问题？我已经看到我可以在链接上执行“display:inline-block”，但这并没有解决它。

这是我的代码:

.container{

display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 80%;
margin: auto;
background-color:#fff;
overflow: hidden;
font-size: 15px;
line-height: 20px;
padding:1em;

}

.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}

a{
text-decoration:none;
border-bottom-style:double; 
border-bottom-width:2px;
color:#99d3df;
display:inline-block;
padding:0px;
overflow: hidden;

}

i{
display:inline-block;
color:#88bbd6;
text-decoration:italic; 
}

还有我所拥有的:

This is a <a href="http://google.com">Google Link</a><BR>
Google is <i>extremely helpful</i>!

这是它的样子，供引用。 Problem image

Answer 1

您似乎错过了您提供的标记中的 .container wrapper div。

让我们看一下这段代码:

<!-- HTML -->
<div class="container">
  <span>This is a </span><a href="http://google.com">Google Link</a
</div>
<div class="container">
  <span>Google is </span><i>extremely helpful</i>!
</div>
<!-- /HTML -->

/* CSS */
.container > * {
  padding: 15px;
  -webkit-flex: 1 100%;
  flex: 1 100%;
}

属性 flex 的值为 1 100% 意味着我们告诉浏览器将任何嵌套在 .container 中的元素(星号 *)设置为具有其父级宽度的 100% 宽度。

我建议您只删除该部分以解决问题。

这是我处理标记的方法。

.container {
  display: flex;
  width: 80%; /* flexible value */
  flex-direction: row; /* this is to make sure that we'll have side-to-side layout within .container */
}

a {
  text-decoration: none;
  border-bottom-style: double;
  border-bottom-width: 2px;
  color: #99d3df;
  display: inline-block;
  padding: 0px;
}

a, i{
 margin-left: 5px; /* this is to give a 10px spacing */
}

<div class="container"><span>This is a </span><a href="#">random link</a><span></span></div>
<div class="container"><span>Google </span><i>is extremely helpful! </i></div>