html - 在图像旁边创建垂直菜单

Question

我正在尝试在图像旁边创建垂直导航(请参阅我正在尝试实现的图像)。

理想情况下，我想将整个 block 限制在一个高度(比如 400 像素)。

下面是 HTML 结构:

<div class="navSlider">
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <div class="slider">
        <img src="img.jpg">
    </div>
</div>

我已经 float 了 nav 和 .slider 并将宽度设置如下:

nav {
   width:28.57142%;
   background:#417050;
   float:left;
}

.slider {
   float:right;
   width:71.42857%;
}

这很好用，但我希望导航始终与图像高度相同，并垂直对齐到 div 的中间。

如有任何帮助，我们将不胜感激!

Answer 1

是的，你可以。让 .navSlider 像表格一样工作，让 nav 和 .slider 像表格单元格一样。然后垂直对齐导航。

CSS:

.navSlider {
    display: table;
    width: 100%;
}
nav, .slider {
    display: table-cell;

}
nav {
    width:28.57142%;
    background:#417050;
    vertical-align: middle;
}
.slider {
    background: lightgreen;
    height: 400px;
}

检查这个demo .

请注意，nav 和 .slider 将始终与此代码具有相同的高度。如果你不想这样，从 nav 中删除背景色并将其添加到其中的 ul 中:

nav {
    width:28.57142%;
    vertical-align: middle;
}
nav > ul {
    background:#417050;
}

检查 updated Fiddle