Question

我想在蓝丝带的右侧放置一些文字，以便它与现有元素位于同一行。我尝试这样做的所有尝试都会导致下一行出现文本。

你能推荐什么？

以下是代码：（JSFiddle）

HTML

<div id='ribbon'>
    <ul id='topMenu'>
        <li>Thing one</li>
        <li>Thing two</li>
        <li>Thing three</li>
    </ul>
</div>

CSS

#topMenu {
    height: 35px;
    margin: 0; padding: 0;
}

#topMenu a {
    color: black;
}

#topMenu li {
    padding: 0 10px 0 10px;
    float: left;
    list-style-type: none;
}

#topMenu li:hover {
    color: white;
    background-color: #00D0FF;
}

UPD：但是如果我需要该文字不是<li>元素？我的意思是，不要使用通用的<li>样式表。

Answer 1

您可以使用nth-of-type伪并将元素浮动到右侧，例如

#topMenu li:nth-of-type(2), #topMenu li:nth-of-type(3) {
    float: right;
}

Demo

或者你可以简单地使用

#topMenu li:last-child {
    float: right;
}

将最后li向右移动。还要确保清除嵌套在ul内的浮动元素，你可以使用自清除类，如 -

.clear_self:after {
   content: "";
   display: table;
   clear: both;
}

这样就不会弄乱您的文档流程。只需在ul元素上调用该类，即容纳浮动元素的容器元素。

此外，您可以在功能区右侧的li元素上使用float替代调用类，但如果您不想增加标记，则可以使用伪这里..

根据您的更新

Demo 2

说明：将整个ul元素浮动到左侧，这将在右侧创建一个空白区域，以便下一个div将转换为right因为我们正在使用float: right;，还要确保清除浮动元素，否则，下一个div将位于空白区域，有关清除浮动的详细信息，您可以阅读我的回答here。

Answer 2

看看我的小提琴。你需要向最后一个li添加浮动。我用一类.last

分开了它

#topMenu li.last{float:right;}

http://jsfiddle.net/9GGLE/2/

Answer 3

如果你试图浮动另一个元素，#ribbon的兄弟，你可以查看这个jsFiddle

.floated { float:right; margin-top:-30px; /* this is to overcome height+padding of the ribbon */ }

将一些文本浮动到div的右侧

3 个答案: