0

鉴于这个小提琴，我希望我的菜单位于整个“卡片”的右边缘，但由于某种原因它不起作用。我尝试了几种不同的方法（边距，右：0，浮动），但它们要么不起作用，要么我失去了父 div 的背景颜色（在浮动的情况下，它基本上折叠了父 div）。

这是我当前的 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;
}
4

2 回答 2

2

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

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

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

于 2013-09-27T18:35:56.263 回答
1

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

如果您移至 .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;
}
于 2013-09-27T18:37:43.683 回答