Question

我试图让粉红色的div宽度只与其中的文本一样宽，而不是延伸到最后。宽度设置为auto，我假设它只会使它足够大以适应文本。

如果没有固定的div大小，如何解决这个问题？

感谢您的帮助

#footer-right{
	float:left;
	width:360px;
	height:200px;
	background:#96F;
}
.footer-text-section-wrap{
	background:#f0f;
	width:auto;
	height:auto;
}
footer-1{
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	border-bottom:1px solid #ccc;
	padding:0 0 10px 0px;
}

<div id="footer-right">
<div class="footer-text-section-wrap">
<footer-1>Get a Quote</footer-1>
</div>
</div>

Answer 1

使用inline-block

footer-1{
  display: inline-block;
}

Answer 2

使其成为内联元素将使其自身大小与文本的大小相同。

＆＃13;

#footer-right{
	float:left;
	width:360px;
	height:200px;
	background:#96F;
}
.footer-text-section-wrap{
	background:#f0f;
	width:auto;
	height:auto;
    display: inline-block;
}
footer-1{
    display: inline-block;
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	border-bottom:1px solid #ccc;
	padding:0 0 10px 0px;
}

＆＃13;

<div id="footer-right">
<div class="footer-text-section-wrap">
<footer-1>Get a Quote</footer-1>
</div>
</div>

＆＃13;

Answer 3

<footer-1>代码为invalid markup，应替换为<footer class="footer-1">Get a quote </footer>，然后修改您的CSS以使用.footer-1

正如其他人所说，使用内联块使其显示为宽度自动

您可以阅读有关display css here

的更多信息

#footer-right{
	float:left;
	width:360px;
	height:200px;
	background:#96F;
}
.footer-text-section-wrap{
	background:#f0f;
	width:auto;
    display:inline-block;
	height:auto;
}
.footer-1{
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	border-bottom:1px solid #ccc;
	padding:0 0 10px 0px;
}

<div id="footer-right">
<div class="footer-text-section-wrap">
<footer class="footer-1">Get a Quote</footer>
</div>
</div>

Answer 4

将display:inline-block;应用于footer-text-section-wrap。将其宽度设置为自动。

.footer-text-section-wrap{
background:#f0f;
width:auto;
height:auto;
display: inline-block;

}

Answer 5

#footer-right{
  float:left;
  width:360px;
  height:200px;
  background:#96F;
}
.footer-text-section-wrap{
  background:#f0f;
  width:80px;
  height:auto;
}
footer-1{
  color:#333;
  font-weight:100;
  font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
  font-size:20px;
  border-bottom:1px solid #ccc;
  padding:0 0 10px 0px;
}

这个css会做你要问的原因宽度：auto无法正常工作是因为父div有一个固定的宽度，因为div默认有display：block它给了孩子div的宽度家长。所以显示：内联块也可以工作，如果不比给孩子固定宽度更好。

div只能与文本内部一样宽，不能延伸到最后

5 个答案: