Question

查看heirarchy以查看是否存在没有定义初始元素的问题，因为我主要使用百分比，但事实并非如此。我甚至设置了一个5px的最大高度到我的容器div，看看是否是问题，但没有任何反应。我一直把头发拉过来。我试图将UL高度与视频高度完全对齐，并使用溢出滚动条来包含其余选项卡。

HTML：

<div class="text" *ngFor="let item of blogs | async | filter : 'feat' : true; let i = index">

CSS：

<div class="video-portfolio">
        <div class="video-nav-contain">
            <ul class="video-nav">
                <li id="hide1">
                    <a class="tablinks" onclick="openVideo(event, 'garageBar')">
                        <img class="tab-icon" src="images/garage-bar-tab.png" onClick="videoDisplay1">
                    </a>
                </li>
                <li id="hide2">
                    <a class="tablinks" onclick="openVideo(event, 'murryLake')">
                        <img class="tab-icon" src="images/murry-lake-tab.png">
                    </a>
                </li>
                <li id="hide3">
                    <a class="tablinks" onclick="openVideo(event, 'roofFun')">
                        <img class="tab-icon" src="images/roof-fun-tab.png">
                    </a>
                </li>
                <li id="hide4">
                    <a class="tablinks" onclick="openVideo(event, 'westsideClean')">
                        <img class="tab-icon" src="images/westsideClean-tab.png">
                    </a>
                </li>
            </ul>
        </div>
        <div id="garageBar" class="tabcontent" id="videoName">
            <video class="vid-tabs" controls>
                <source src="images/garage%20bar.mp4" type="video/mp4">
            </video>
        </div>
        <div id="murryLake" class="tabcontent" style=" display: none;">
            <video class="vid-tabs" controls>
                <source src="images/murry%20lake2.mp4" type="video/mp4">
            </video>
        </div>
        <div id="roofFun" class="tabcontent" style="display: none;">
            <video class="vid-tabs" controls>
                <source src="images/rooftop%20fun.mp4" type="video/mp4">
            </video>
        </div>
        <div id="westsideClean" class="tabcontent" style="display: none;">
            <video class="vid-tabs" controls>
                <source src="images/westside%20cleanup.mp4" type="video/mp4">
            </video>
        </div>
    </div>

Answer 1

如果使用 flexbox 不是一个选项，那么表可能是？

见这里：https://jsfiddle.net/mypxxbbw/

我只将 .tabcontent 包装在 .tabcontent-wrapper 中，并将display: table-cell应用于此 .video-nav-contains

然后我在您的下方添加了以下 CSS （这样您就可以看到，我实际添加或删除的内容更容易了）：

video-portfolio {
  display: table;
}
.tacontent-wrapper, .video-nav-contain {
  display: table-cell;
  float: none; /* no float needed */
}
.video-nav-contain {
  overflow: hidden; /* move overflow from here to ul */
}
.video-nav-contain > ul.video-nav {
  padding: 0; margin: 0;
  overflow: scroll; /* the overflow from above */
  width: 100%; height: 100%;
}

元素拒绝调整大小？

1 个答案: