如何使用CSS设置div宽度以适合内容（） _div宽度以适合内容

下面列出了解决此问题的三种方法：

默认情况下
使用内联块属性
在width和height中使用fit-content属性

默认情况：
HTML div默认情况下适合其中的内容。该示例如下所示：
范例1：

< !DOCTYPE html> < html lang = "en" dir = "ltr"> < head> < meta charset = "utf-8"> < title> lsbin Example< /title> < !--CSS Code--> < style media = "screen"> body { background: orange; overflow: hidden; color: white; } .lsbin { text-align: center; background: dodgerblue; position: absolute; top: 50%; left: 1%; right: 1%; } < /style> < /head> < body> < !-- HTML Code --> < h1 style = "color:forestgreen; top:35%; left: 35%; position:absolute; "> Geeks For Geeks < /h1> < div class = "lsbin"> Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. < /div> < /body> < /html>

【如何使用CSS设置div宽度以适合内容（）】输出如下：

文章图片
使用内联块属性：使用display：inline-block属性可根据其内容设置div大小。
范例2：

< !DOCTYPE html> < html lang = "en"> < head> < meta charset = "utf-8"> < title> lsbin Example< /title> < !--CSS Code--> < style media = "screen"> body { background: violet; overflow: auto; color: white; } .lsbin { text-align: center; background: dodgerblue; position: absolute; display: inline-block; left: 1%; right: 1%; top: 50%; } < /style> < /head> < body> < !-- HTML Code --> < h1 style="color: forestgreen; top: 35%; left: 35%; position: absolute; "> Geeks For Geeks < /h1> < div class = "lsbin"> Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. < /div> < /body> < /html>

输出如下：

文章图片
在width和height中使用fit-content属性：
在此方法中, 我们将width和height属性设置为fit-content值。
范例3：

< !DOCTYPE html> < html lang = "en" dir = "ltr"> < head> < meta charset = "utf-8"> < title> Geeks for Geeks Example< /title> < !--CSS Code--> < style media = "screen"> body { background: tomato; overflow: hidden; color: white; } .lsbin { background: crimson; position: absolute; width:fit-content; height:fit-content; left: 0; top: 50%; } < /style> < /head> < body> < !-- HTML Code --> < h1 style = "color: lime; top: 35%; left: 35%; position: absolute; "> Geeks For Geeks < /h1> < div class = "lsbin"> Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. < /div> < /body> < /html>

输出如下：