html - div の右側にテキストをフロートする

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

#ribbon の兄弟である別の要素をフロートしようとしている場合は、このjsFiddleを確認できます

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

Answer 2

私のフィドルをチェックしてください。float を最後の li に追加する必要がありました。.lastのクラスで分けました

#topMenu li.last{float:right;}

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