Плавающий верхний правый и верхний левый и wordwrapping

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>