问题
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
回答1:
Adding display: inline-block;
to your a
element seems to solve your problem. You may have adjust padding/margin, though.
来源:https://stackoverflow.com/questions/17977722/parent-container-not-expanding-to-child-elements