html - 将文本元素粘贴到 div 的右侧

Question

我有一个元素菜单，需要按以下方式显示其价格:

ITEM......120

(点号只是为了表示两者之间的间距，不会出现在代码中)

到目前为止，我所做的是创建一个 width:200px 的 div，我在其中放置了文本。

像这样:http://jsfiddle.net/Newtt/jE2YL/1/

但是，我想知道是否可以将价格固定在框的右边距？ 我试过 padding-left: X px;，但我有一个包含 100 多个菜单项的列表，每个菜单项都有任意长度的字符，这些字符又会更改每个价格元素的填充和改变每个元素的填充是相当麻烦的。

谢谢!

Answer 1

您可以结合position: absolute和 position: relative .

使用以下 CSS:

.abc{
    width:200px;
    background:#ccc;
}
    .abc h5 {
        position: relative;
    }
        .abc h5 span {
            position: absolute;
            right: 0;
        }

jsFiddle Demo

或者，您可以只使用 float: right在 <span> 上:

.abc h5 span {
    float: right
}

jsFiddle Demo 2