CSS Flex延伸链接

Question

So I am learning a bit more about using CSS flex instead of using static positioning of content. However, I have defined my link styles as well as bold styles. My guess is that it's adapting to the container that is in (which is using flex feature) and that is why it is stretching across the size of the container it is inside. My question now is, how do I fix this? I've seen that I can do "display:inline-block" on the link, but that has not fixed it.

Here is my code:

.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; 
}

And what I have:

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

This is what it looks like for reference. Problem image

Answer 1

It is working fine when I tried your code in js fiddle

see in this image

May be some other css is affecting your links to stretch it out.

Answer 2

It seems you missed the .container wrapper div in the markup you provided.

Let's look at this code:

<!-- 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%;
}

Property flex with value of 1 100% means we tell the browser to style any elements (the asterisk *) nested in .container to have 100% width of their parent's width.

I would suggest you to just remove that part to fix the problem.

Here's my approach to your markup.

 .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>