html - 对齐 Logo 、标题和菜单

Question

如何将 Logo 、标题文本和菜单全部对齐在一行中， Logo 左对齐，标题文本和菜单右对齐？我看到的大多数答案都是针对两个元素(例如 Logo 和菜单)。

例如，在下面的示例中，图像 div 和文本 div 应该左对齐(它们确实如此)而菜单 div 应该右对齐(但没有)。它们也都应该垂直对齐(菜单 div 没有)。另见 http://jsfiddle.net/ecodiv/0xk935n6/

<div class="header">
    <div class="image"></div>
    <div class="text">Header text</div>
    <div class="menu">
        <ul>
            <li><a href="#">menu 1</a></li>
           <li><a href="#">menu 2</a></li>
        </ul>
    </div>
</div>

还有 CSS:

.header {
}
.header .image {
    background-color: red;
    width: 70px;
    height: 93px;
}
.header .text {
    background-color: yellow;
}
.header menu {
    float:right;
}
.menu ul {
    float: right;
    list-style-type: none;
}
.menu li {
    float: left;
    margin: 0 8px;
}
.image, .text, .menu {
    display: inline-block;
    vertical-align: bottom;
}

Answer 1

您的 CSS 中缺少类的点符号。

代替

.header menu {
    float:right;
}

写

.header .menu {
    float:right;
}

此外，如果您希望您的 .text 和 .image 与 .menu 在同一行，只需添加 float: left 这两个...