css div的宽度仅与内部的文本一样宽,而不是拉伸到末尾

z4bn682m  于 2023-05-08  发布在  其他
关注(0)|答案(5)|浏览(139)

我试图让粉红色的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>
pexxcrt2

pexxcrt21#

使用inline-block

footer-1{
  display: inline-block;
}
pw136qt2

pw136qt22#

<footer-1>标签是invalid markup,应该替换为<footer class="footer-1">Get a quote </footer>,然后修改您的css以使用.footer-1
正如其他人所说的那样,使用inline-block使其显示为自动宽度
您可以阅读更多关于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>
hivapdat

hivapdat3#

使其成为一个内联元素将使其自身大小与您的文本大小一致。

#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;
}
<div id="footer-right">
<div class="footer-text-section-wrap">
<footer-1>Get a Quote</footer-1>
</div>
</div>
kkbh8khc

kkbh8khc4#

#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:块,它会给子div父div的宽度。因此显示:inline-block也可以工作,如果不比在子元素上放置固定宽度更好的话。

yvt65v4c

yvt65v4c5#

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

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

相关问题