Question

我为垂直列表创建了一个包装器。正如您所看到的，我的列表显示为块元素，我想要做的是在包含的包装器中将视频嵌入其中，但无论我如何尝试，我都不能。

我曾经说过，如果我为包含我的嵌入视频的width指定了height，div等，它会照顾它。但是，唉，不是。

请某位学者和学者请查看我的简陋代码并提供解决方案。

HTML

<div id="wrapper">
    <div id="navcontainer">
        <ul>
            <li><a href="#">video_1</a>
            </li>
            <li><a href="#">video_2</a>
            </li>
            <li><a href="#">video_3</a>
            </li>
            <li><a href="#">video_4</a>
            </li>
            <li><a href="#">video_5</a>
            </li>
            <li><a href="#">video_6</a>
            </li>
            <li><a href="#">video_7</a>
            </li>
            <li><a href="#">video_8</a>
            </li>
            <li><a href="#">video_9</a>
            </li>
            <li><a href="#">video_10</a>
            </li>
        </ul>
    </div>
    <div id="video_embed"></div>
</div>

CSS

/* style for lists*/
#wrapper {
    border: 1px solid black;
    background-color:#ccc;
    padding:.2em;
}
div#navcontainer ul {
    border: 1px solid red;
    width: 18%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
div#navcontainer li {
    margin: 0 0 .2em 0;
}
div#navcontainer a {
    display: block;
    color: #036;
    background-color: transparent;
    width: 9em;
    padding: .2em .8em;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #036;
    border-bottom: 1px solid #036;
}
div#navcontainer a:hover {
    background-color: #369;
    color: #FFF;
    border-top: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
div#video_embed {
}
/* end style for lists*/

Answer 1

我认为你想要的是div#navcontainer和div#video_embed inline-block。

在此JSFiddle example中，我还在vertical-align: top;和#navcontainer上加了#video_embed。我已将outline和width以及height添加到#video_embed，只是为了让它在示例中可见。

希望这就是你要找的东西！

如何在块元素旁边嵌入视频

1 个答案: