html - 浮动右上角和左上角和自动换行

Question

我有一个网页，它应该包含<h1>左上角的标题和右上角的水平列表。没有为任何一个元素指定宽度。我似乎无法解决的问题是，如果内容<h1>变长，我希望它能够换行。但是无论我如何尝试，当内容变长时，列表都会下推到下一行。帮助将不胜感激。

最好我想使用以下标记：

<div>
    <h1><a href="#">A header which should wrap and leave the list unaffected</a></h1>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

对于定位，我目前使用以下样式：

h1 {
    margin:0;
    padding:0;
    float:left
}

ul { float:right }

li {
    float:left;
    list-style-type: none
}

如果有人得到它的帮助，我创建了一个小提琴：http: //jsfiddle.net/Sj5SW/

Answer 1

这适用于jsfiddle

更新代码：

h1 {
    margin:0;
    padding:0;
}

ul { float:right }

li {
    float:left;
    list-style-type: none
}


<div>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <h1><a href="#">A header which should wrap and leave the list unaffected</a></h1>
</div>