html - div 没有正确排列

Question

我有一个标题，其中有一个水平重复的背景图像。它的内容设置为 ul 列表。我想让其中一些向左浮动，一个向右浮动。我在 ul 列表之后还有一个 div 作为我的标题末尾的上限。这个帽子有一个圆 Angular 。我也将此设置为向右浮动，这就是问题所在。我发布了一个虚拟版本供您查看。任何人都可以告诉我如何让输入字段保持器正确 float 并且仍然让我的上限 float 而不像现在这样设置在标题下方。

Link to header html

Answer 1

这个有效:

<ul>
    <li class="live"><a href="#">button1</a></li>
    <li class="schedule"><a href="#">button2</a></li>
    <li class="dvr"><a href="#">button3</a></li>
    <li class="leftCap"></li>
    <li class="tools">
      <form class="search" action="get">
        <input class="searchField" name="q" maxlength="40">
      </form>
    </li>
</ul>

您的 leftcap 作为 div 在 ul 之外，但将其放在 ul 内将更正此问题。