使width的<a>宽度等于其内容的宽度</a>

Question

在下面的第一个示例中， id="A_2"的宽度等于其内容，而一秒钟， id="A_4"的宽度等于其父项。 如何更改第二个片段的宽度等于其内容？

该摘录来自Google Play商店代码

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

这是我的代码

 #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

如果我理解正确，则您希望a#A_4宽度与内容相同...对吗？

然后从中移除display: block 。

要使链接显示在新行上，只需在其中添加换行符即可。

更新的Codepen

Answer 2

<h1>元素具有与其内容相同的宽度，如果定义则更大。

有内联元素和块元素。 内联元素的宽度等于其内容，块元素使用所有可用宽度。 由于您将“ A_4”定义为块，因此它将使用所有可用宽度。 元素<a>是一个内联元素，因此它将具有与内容相同的宽度。

从<a>元素和所有固定宽度或最小宽度值中删除“ display：block”。 要将链接分隔为不同的行，请先分隔，然后使用<br/>元素。

编辑：例如：

的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*/