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

Question

在下面的第一个例子中，id="A_2" 的宽度等于它的内容，而第二个，它 id="A_4" 的宽度等于它的父元素。如何更改第二个代码段使其宽度等于其内容？

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

这是 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

如果我没理解错的话，您希望 a#A_4 与其内容一样宽...对吗？

然后从中删除 display: block。

要使 link 出现在新行中，只需添加一个换行符即可。

Updated Codepen

Answer 2

<h1> 元素的宽度与其内容相同，或者如果您定义它则更大。

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

从 <a> 元素中删除 'display:block'，以及所有固定宽度或最小宽度值。要将不同行的 link 分开，请使用 <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*/

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

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

html

css

webpage

width

web