Question

如何在一行上对齐徽标，标题文本和菜单，徽标左对齐，然后是标题文本和菜单对齐？我见过的大多数答案都是针对两个元素（例如，徽标和菜单）。

例如，在下面的示例中，图像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添加到这两个行中......

Answer 2

您可以更改为使用position: absolute div上的menu，然后设置right: 0; bottom: 0;，这会将menu与最右侧和最右侧对齐。

.header {
    position: relative;
}

.header .menu {
    position: absolute;
    right: 0;
    bottom: 0;
    border:2px solid green;
}

JSFiddle

对齐徽标，标题和菜单

2 个答案: