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>

浮动右上角和左上角以及自动换行

1 个答案: