0

我有一堆垂直对齐的选项卡项，其中似乎无法让父容器（<a href...>在我的 HTML 中）展开以覆盖子元素。我尝试使用 a <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;
}

整个网站可以在这里看到

4

1 回答 1

1

添加display: inline-block;到您的a元素似乎可以解决您的问题。不过，您可能已经调整了填充/边距。

于 2013-07-31T21:09:43.797 回答