如何让内部div填充整个包装div？

Question

我有以下HTML代码:

<div class="outer ui-draggable" style="position: relative;">
  <div class="inner">Foo bar</div>
</div>

有了这个CSS:

.outer
{
    background-color: #F7F085;
    margin: 5px;
    height: 100px;
    width: 150px;
    text-align:center;
    vertical-align:text-bottom;
}
.outer .inner
{
    display:inline;
    vertical-align:middle;
    height: 100px;
    width: 150px;
}

我希望内部div完全填充外部div - 文本块应该是一个完整的100X150盒子.

问题是这段代码不能产生预期的效果.外部div确实是正确的大小,但内部div似乎只填充外部div顶部的一个小区域.

我也尝试使用height:inherit和width:inherit而不是指定大小.

Answer 1

问题在于display:inline风格.如果你想让它表现得像普通的DIV,那就保持它display:block.如果它display:inline只是与继承的行高一样高.