html - 具有子跨度的 100% 宽度 div 不会右对齐

Question

给定this fiddle ，我希望我的菜单位于整个“卡片”的右边缘，但由于某种原因它不起作用。我尝试了几种不同的方法(边距，右:0， float )但它们要么不起作用，要么我失去了父 div 的背景颜色(在 float 的情况下，它基本上折叠了父 div)。

这是我当前的 HTML 和 CSS，如 fiddle 中所示。

<div class="server">
    <div class="name">Server01</div>
    <div class="menu">
        <span class="items">
            <span>Menu01</span>
            <span>Menu02</span>
            <span>Menu03</span>
        </span>
    </div>
    <div class="content">
    </div>
</div>

.server {
    position: relative;
    width: 400px;
    height: 200px;
    margin: 10px;
    background-color: #686868;
}

.name {
    font-size: large;
    position: relative;
    top: 0px; left: 0px; right: 0px;
    padding-left: 10px;
    background-color: cornflowerblue;
    color: white;
    cursor: default;
}

.menu {
    font-size: small;
    position: relative;
    width: 100%;
    background-color: cornflowerblue;
    color: white;
}
.menu .items span {
    margin-left: 10px;
}
.menu .items {
    display: inline-block;
    position: relative;
    right: 0px;
    text-align: right;
    cursor: pointer;
}

Answer 1

您已经制作了您的 <span />元素有width:100%所以你需要将文本右对齐而不是 float 框。 float 盒子只有在有空间可以 float 时才有效，但由于你的盒子是 100% 宽的，所以没有它可以移动的空间。如果您没有指定宽度， float 将起作用，并且要保持背景颜色，您必须将该元素包裹在另一个元素中，并为新的父元素提供背景颜色。

这是您的 JSFiddle 的更新版本:http://jsfiddle.net/UNxyw/1/

我只申请了text-align:right到 .menu元素。