0

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

你能推荐什么？

这是代码：（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>样式表。

4

3 回答 3

1

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

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

演示

或者你可以简单地使用

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

将最后一个li向右移动。还要确保清除嵌套在其中的浮动元素ul，您可以使用自我清除类，例如 -

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

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

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

根据您的更新

演示 2

说明：将整个ul元素浮动到左侧，这将在右侧创建一个空白空间，以便下一个div将转移到right我们正在使用的float: right;，同时确保清除浮动元素，否则，下一个div将位于右侧空白处，有关清除浮动的更多信息，您可以在此处阅读我的答案..

于 2013-08-14T14:24:20.417 回答
0

看看我的小提琴。您需要将浮点数添加到最后一个 li。我将它与 .last 类分开

#topMenu li.last{float:right;}

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

于 2013-08-14T14:25:38.333 回答
0

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

.floated { float:right; margin-top:-30px; /* this is to overcome height+padding of the ribbon */ }
于 2013-08-14T14:39:44.310 回答