防止 div 元素占满整个宽度

Question

<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;">

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Hello<br />Hola

  </div>

  <div style="
         border: 2px solid black;
         margin: 0 auto;
         text-align: center;
         padding: 3px;">

    Another Sentence

  </div>

</div>

我有一个问题：内部div的边框覆盖整个页面的宽度，但我希望它们只框住其中的内容。如果使用display: inline，边框会分别框住每一行并重叠，这种方法行不通 - 有人能帮忙吗？

P.S 样式表中原始文档中未声明这些样式。

- Samuel

---

显示：inline-block，感谢meder和Nikita Rybak。 - Samuel

真是太难了，找到正确的搜索词才能找到这个。谢谢，12年后！ :) - Mmm

Answer 1

给绝对定位的元素分配一个宽度？如果要实现包裹内容效果，float:left 或者 display:inline-block 是最合适的选择。

- meder omuraliev

---

这也会影响到上下边距折叠。 - donquixote

现今有 width: fit-content。 - leymannx

@leymannx - 相比我们以前所面临的限制，现在是一个完全不同的世界 :) - meder omuraliev

Answer 2

尝试使用 display:inline-block，在这种情况下它总是对我有帮助。

http://jsfiddle.net/FaYLk/

- Nikita Rybak

Answer 3

仅仅这样做并不简单：

display: inline-block;

你必须做更多的工作才能跨浏览器。

display: inline-block;
display: -moz-inline-stack; /* for firefox 2 */
*display: inline; /* for ie 6 and 7 */

- David Lawrence

Answer 4

将所有内容放到一个容器中。例如:

<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div>
.container{ display: inline-block; } 

- James111