父容器不扩展到子元素 [英] Parent container not expanding to child elements

问题描述

我有一堆垂直对齐的选项卡项目，我似乎无法得到父容器（< a href ...> in我的HTML）扩展到覆盖子元素。我已经尝试使用< br style =clear：both> 和 overflow：hidden; 但第一个没有做任何事情，第二个只是把它切断（使用自动添加滚动条，这并没有帮助）有关如何解决它的任何想法？

< HTML样本：

 < li class =active> 
< a href =＃pane1adata-toggle =tab> 
< div class =preview-box> 
< img class =preview-imagesrc =img / monestary_floorplan.png> 
< p id =previewcarousel1a>< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃pane1bdata-toggle =tab> 
< div class =preview-box> 
< img class =preview-imagesrc =img / bkg-img-home2.jpg> 
< p id =previewcarousel1b>< / p> 
< / div> 
< / a> 
< / li> 
  

CSS：

  .preview-box {
 width：90px; 
 height：80px; 
 / * border：2px纯红色; * / 
 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

解决方案添加 display：inline-block; 到你的 a 元素似乎解决了你的问题。不过，您可能需要调整填充/边距。

I have a bunch of vertically aligned tab items in which and I can't seem to get the parent container (the <a href...> in my HTML) to expand to cover the child elements. I've tried using a <br style="clear: both"> and overflow: hidden;but the first didn't do anything and the second just cut it off (using auto just added a scroll bar, which doesn't help) any thoughts on how to fix it?

HTML sample:

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

The whole site can be seen here

解决方案

Adding display: inline-block; to your a element seems to solve your problem. You may have adjust padding/margin, though.

这篇关于父容器不扩展到子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！