html - 如何在 block 元素旁边嵌入视频

Question

我为垂直列表创建了一个包装器。如您所见，我的列表显示为 block 元素，我想做的是在包含包装器的旁边嵌入视频，但无论我如何尝试都做不到。

我曾想过，如果我为包含我的嵌入式视频的 div 指定了 width、height 等，它会处理它。但遗憾的是，事实并非如此。

请哪位好心的博学之士看看我简陋的代码并提供解决方案。

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我还在 #navcontainer 和 #video_embed 上放置了一个 vertical-align: top;。我在 #video_embed 中添加了 outline 和 width 以及 height 只是为了让它在示例中可见.

希望这就是您要找的!