Make width of <a> to have a width equal to its content

Question

In the first example below, the id="A_2" has a width equal to its content, while the one second, it id="A_4" has a width equal to its parent. How can I change the second snippet to have width equal to its content?

This snippet is from Google Play Store Code

 #H1_1 { box-sizing: border-box; color: rgb(51, 51, 51); font-family: Roboto, UILanguageFont, Arial, sans-serif; font-size: 28px; font-weight: 100; height: 75px; line-height: 39.2000007629395px; min-height: 37px; min-width: 680px; padding: 5px; position: relative; text-align: left; width: 1088px; perspective-origin: 544px 37.5px; transform-origin: 544px 37.5px; border: 0px none rgb(51, 51, 51); font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif; margin: 0px 50px 0px 248px; outline: rgb(51, 51, 51) none 0px; padding: 5px; }/*#H1_1*/ #A_2 { color: rgb(51, 51, 51); font-family: Roboto, UILanguageFont, Arial, sans-serif; font-size: 28px; font-weight: 100; line-height: 39.2000007629395px; text-align: left; text-decoration: none; font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif; }/*#A_2*/ #A_3 { color: rgb(85, 85, 85); display: block; font-family: Roboto, UILanguageFont, Arial, sans-serif; font-size: 16px; font-weight: 300; height: 22px; line-height: 22.3999996185303px; padding-bottom: 4px; text-align: left; text-decoration: none; width: 1078px; font: normal normal 300 normal; 16px/22.3999996185303px Roboto, UILanguageFont, Arial, sans-serif; padding: 0px 0px 4px; } 

  <h1 id="H1_1"> <a href="/store/apps/collection/promotion_3001315_cricket_worldcup_appsin" id="A_2">Cricket Fever</a> <a href="/store/apps/collection/promotion_3001315_cricket_worldcup_appsin" id="A_3">Get cool games + Cricket apps</a> </h1> 

Here is My Code

 #H1_1 { display: flex; height: 60px; min-height: 37px; min-width: 680px; position: relative; width: 1088px; align-items: stretch; justify-content: flex-start; flex-flow: column nowrap; font: normal normal bold normal 32px/normal Roboto, UILanguageFont, Arial, sans-serif; margin: 0px 50px 0px 248px; padding: 5px; }/*#H1_1*/ #A_2 { color: rgb(85, 85, 85); height: 34px; text-decoration: none; align-self: stretch; border: 0px none rgb(85, 85, 85); font: normal normal 100 normal 28px/normal Roboto, UILanguageFont, Arial, sans-serif; }/*#A_2*/ #A_3 { box-sizing: border-box; color: rgb(85, 85, 85); height: 23px; text-decoration: none; align-self: stretch; border: 0px none rgb(85, 85, 85); font: normal normal 300 normal 16px/normal Roboto, UILanguageFont, Arial, sans-serif; margin: 3px 0px 0px; padding: 0px 0px 4px; }/*#A_3*/ 

 <h1 id="H1_1"> <a id="A_2" href="">Cricket Fever</a> <a id="A_3" href="">Get cool games + Cricket apps</a> </h1> 

Answer 1

If I understand correctly, you want a#A_4 to be as width as it's content... right?

Then remove the display: block from it.

To make the link appear on a new line, simply add a line break to it.

Updated Codepen

Answer 2

The <h1> element has the same width as it content, or bigger if you define it.

There are inline elements and block elements. Inline elements a width equal to its content, the block elements use all the available width. Since you defined 'A_4' as block, it will use all the available width. Element <a> is an inline element, so it will have the same width as it content.

Remove the 'display:block' from the <a> elements, and all the fixed width or min-width values. To separate your link for different lines, separate then using <br/> element.

EDIT: example:

HTML

<h1 id="H1_1">
     <a id="A_2" href="">Cricket Fever</a>
  <br/>
  <a id="A_3" href="">Get cool games + Cricket apps</a> 
</h1>

CSS

#H1_1 {
    background-color: #000;
    margin: 0px 50px 0px 248px;
    padding: 5px;
}/*#H1_1*/

#A_2 {
    background-color: #666;
    color: rgb(85, 85, 85);
    height: 34px;
    text-decoration: none;
}/*#A_2*/

#A_3 {
    background-color: #999;
    color: rgb(85, 85, 85);
    text-decoration: none;
    margin: 3px 0px 0px;
    padding: 0px 0px 4px;
}/*#A_3*/