📌  相关文章
📜  如何使用 CSS 使 div 宽度随其内容扩展?

📅  最后修改于: 2021-11-10 04:02:56             🧑  作者: Mango

给定一个 HTML 文档,任务是使用 CSS 使其内容扩展 div 宽度。为此,width 属性用于设置元素的宽度,不包括元素的内边距、边距和边框。下面列出了宽度属性值:

句法:

width: length|percentage|auto|initial|inherit;

属性值:

  • 宽度:自动;它用于将宽度属性设置为其默认值。如果 width 属性设置为 auto 则浏览器计算元素的宽度。
  • 宽度长度;用于以px、cm等形式设置元素的宽度,长度不能为负数。
  • 宽度:初始;它用于将宽度属性设置为其默认值。
  • 宽度:继承;它用于从其父元素设置宽度属性。

示例 1:此示例使用 width: auto;显示内容的属性。

HTML


  

    
        How to make div width expand 
        with its content using CSS ?
    
  
    

  

    
        

GeeksforGeeks

           

            How to make div width expand              with its content using CSS ?         

           
            

                Javascript is the most common                  programming language used in                  many startups and large enterprises                  for software development. It is                  used as a client-side development                  tool in 95% of the websites.              

        
           
            

Python is a dynamic, high level,                  open-source programming language.                  It is relatively a newer language                 in the world of programming                  languages and in AWS environment                  as well. This is the simplest                  language and beginners friendly.              

        
           
            

Java is an object-oriented language                  with fewer dependencies. It is a                  secure and dynamic language                  designed to have high performance.                 Java is one of the earliest languages                 used in business-critical ideas.              

        
    
  


HTML


  

    
        How to make div width expand 
        with its content using CSS ?
    
  
    

  

    
           

GeeksforGeeks

           

            How to make div width expand              with its content using CSS ?         

           
            

                Javascript is the most common                  programming language used in                  many startups and large                  enterprises for software                  development.             

                  
                

                    Python is a dynamic, high                      level, open-source programming                     language. It is relatively a                      newer language in the world                     of programming languages and                      in AWS environment as well.                 

            
               
                

                    Java is an object-oriented                      language with fewer dependencies.                      It is a secure and dynamic                     language designed to have high                      performance.                 

            
        
    
  


输出:


更改屏幕大小后的输出:

示例 2:本示例使用 width: inherit 属性来显示内容。

HTML



  

    
        How to make div width expand 
        with its content using CSS ?
    
  
    

  

    
           

GeeksforGeeks

           

            How to make div width expand              with its content using CSS ?         

           
            

                Javascript is the most common                  programming language used in                  many startups and large                  enterprises for software                  development.             

                  
                

                    Python is a dynamic, high                      level, open-source programming                     language. It is relatively a                      newer language in the world                     of programming languages and                      in AWS environment as well.                 

            
               
                

                    Java is an object-oriented                      language with fewer dependencies.                      It is a secure and dynamic                     language designed to have high                      performance.                 

            
        
    
  

输出:


更改屏幕大小后的输出: