如何基于文本内容创建具有动态宽度的div框? [英] How to create a div box with dynamic width based on text content?

查看：45 发布时间：2021/5/14 20:01:45 html css

本文介绍了如何基于文本内容创建具有动态宽度的div框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我想创建一个简单的 div ，该代码根据所包含的内容进行收缩和扩展.

I want to create a simple div that shrinks and expands according to the content contained.

<body>
  <div style="border: 1px solid red; padding: 15px; width:auto;">
    test text
  </div>
</body>

结果:红色框扩展到页面的整个宽度.为什么?

Result: the red box expands to the full width of the page. Why?

尝试一下:

<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block">
  test text
</div>

Here's an explanation on display: inline & display: inline-block - a good read to learn

这篇关于如何基于文本内容创建具有动态宽度的div框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文