父容器不擴展到子元素

我有一堆垂直對齊的選項卡項目，我似乎無法獲取父容器（我的HTML中的<a href...>）展開以覆蓋子元素。我嘗試過使用<br style="clear: both">和overflow: hidden;，但第一個沒有做任何事情，第二個只是將它切斷（使用auto只是添加了一個滾動條，這沒有幫助）關於如何解決它的任何想法？父容器不擴展到子元素

HTML樣本：

<li class="active"> 
              <a href="#pane1a" data-toggle="tab"> 
               <div class="preview-box"> 
                <img class="preview-image" src="img/monestary_floorplan.png"> 
                <p id="previewcarousel1a"></p> 
               </div> 
              </a> 
             </li> 
             <li> 
              <a href="#pane1b" data-toggle="tab"> 
               <div class="preview-box"> 
                <img class="preview-image" src="img/bkg-img-home2.jpg"> 
                <p id="previewcarousel1b"></p> 
               </div> 
              </a> 
             </li>

CSS：

.preview-box { 
    width: 90px; 
    height: 80px; 
    /*border: 2px solid red;*/ 
    margin-left:auto; 
    margin-right:auto; 
} 
.preview-image { 
    display: block; 
    width: 75px; 
    height: 60px; 
    border: 4px solid #84be46; 
    margin-left:auto; 
    margin-right:auto; 
} 
.preview-items p{ 
    color: #84be46; 
    text-align: center; 
    margin-top: 5px; 
}

整個網站可以看到here

來源

2013-07-31 Mike

添加display: inline-block;您a元素似乎解決您的問題。不過，您可能需要調整填充/邊距。

來源

2013-07-31 21:09:43 tacensi

對不起黑暗...這似乎並沒有真正的工作（我實際上有一個40px的底部邊距，我沒有包括在我的CSS上面）。我嘗試了一個朋友的建議來做'display：table'，它至少給它一個高度和寬度，但它仍然沒有擴展到整個p元素。 – Mike

您已將80px的高度定義爲'.preview-box'，這就是剪切其中的'p'元素的原因。 – tacensi

真棒tacensi！那是我的問題。 – Mike

父容器不擴展到子元素

回答

相關問題