防止div占用100％的宽度

<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>

I have a problem: the borders of the inner div's reach over the whole width of the page, but i want them to only frame the content inside them. If i use: display: inline the borders frame each line separately and overlap, so that doesn't work - can somebody help?

我有一个问题：内部div的边界覆盖整个页面的宽度，但我希望它们只构建其中的内容。如果我使用：display：内联边框将每一行分开并重叠，这样就行不通了 - 有人可以帮忙吗？

P.S the style's aren't declared like this in the original document but in a stylesheet

P.S样式不是在原始文档中声明，而是在样式表中声明

4 个解决方案

#1

Assign a width to the absolutely positioned element? If you're looking for shrink-wrapping, float:left or display:inline-block are perfect for that.

为绝对定位的元素指定宽度？如果你正在寻找收缩包装，浮动：左或显示：内联块是完美的。

#2

Try display:inline-block, it always helps me in situations like this.

尝试显示：内联块，它总是帮助我在这样的情况下。

http://jsfiddle.net/FaYLk/

#3

Its not as simple to just do:

它不是那么简单：

display: inline-block;

You must do more than that to cross browser this.

你必须做更多的事情才能跨浏览器。

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

#4

Put a container around all the content. E.g

在所有内容周围放置一个容器。例如

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

#1