Question

鉴于this fiddle，我希望我的菜单位于整个“卡片”的右边缘，但由于某种原因它不起作用。我尝试了几种不同的方法（边距，右边：0，浮点数），但是它们要么不起作用，要么我丢失了父div的背景颜色（在浮点数的情况下它基本上会折叠父div）。 / p>

这是我当前的HTML和CSS，如小提琴中所示。

<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%，因此您需要将文本对齐而不是浮动框。浮动框只有在有空间浮动时才有效，但由于你的框子是100％宽，所以它没有空间可以移动。如果您没有指定宽度，则浮动将起作用，并保留您必须将元素包装在另一个元素中的背景颜色，并为新的父元素提供背景颜色。

以下是JSFiddle的更新版本：http://jsfiddle.net/UNxyw/1/

我只将text-align:right应用于.menu元素。

Answer 2

你不能在跨度编辑上进行文本对齐：如果你没有指定宽度。

如果你移动到.menu就行了

.menu {
    font-size: small;
    position: relative;
    width: 100%;
    background-color: cornflowerblue;
    color: white;
       text-align: right;
}

.menu .items {
    position: relative;
    right: 0px;

    cursor: pointer;
}

带子跨度的100％宽度div不会对齐

2 个答案: