Question

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

此代码段来自Google Play Store Code

＆＃13;

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

＆＃13;

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

＆＃13;

这是 My Code

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，您希望a#A_4的宽度与内容一样宽......对吗？

然后从中删除display: block。

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

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

宽度为<a> to have a width equal to its content</a>

2 个答案: