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样式在原始文档中没有这样声明，而是在样式表中

Answer 1

为绝对定位的元素指定宽度？如果您正在寻找收缩包装，float:left或display:inline-block是完美的。

Answer 2

尝试display:inline-block，在这种情况下，它总能帮到我。

http://jsfiddle.net/FaYLk/

Answer 3

它不是那么简单：

display: inline-block;

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

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

Answer 4

在所有内容周围放置一个容器。 E.g

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

防止div占用100％的宽度

4 个答案: