CSS标签定位

Question

我正在尝试使用无序列表来模拟CSS中的标签，但我创建的标签会以某种方式扩展到它们下面的表单中（当然这是非预期的）

我通过向左浮动链接创建了标签。这就是我要的，

但不幸的是，这就是我要得到的。注意选项卡如何替换表单的“input”元素。发生了什么事？

这是我的标记和CSS

<link rel='stylesheet' type='text/css' href='style.css'>
<div id='page'>
    <ul class='tabs'>
        <li><a href='www.google.co.ug'>google search</a></li>
        <li><a href='showall.php'>show all names</a></li>
        <li><a href='logout.php'>logout</a></li>
    </ul>
    <form action='storedata.php' method='post'>
            <div class='simpledata'>
                <label for='fname'>first name</label>
                <input class='kyetagisa' type='text' name='fname' size='20'>
            </div>
        //more elements added here

    <input type='submit'>
    </form>
</div>

这是style.css

label
{
    text-align:right;
    width:150px;
    float:left;
    clear:both;
    margin-right:5px;
}

div.simpledata
{
    margin-top:5px;
}

ul
{
    list-style:none;
}

ul.tabs a
{
    float:left;
    margin-right:10px;
    color:white;
    text-decoration:none;
    background-color:#00e;
}

#page
{
    background-color:#eee;
    margin-left:130px;margin-right:130px;
    height:180px;
}

Answer 1

您可以使用：

form {
    clear: both;
}

强制form（及其子元素）显示在ul下方。

JS Fiddle

Answer 2

您需要在ul。

之后添加清除div或br

Answer 3

我刚刚从标签css块中删除了浮动：

http://jsfiddle.net/tTrAa/

Answer 4

将列表的'overflow'样式属性设置为'hidden'也应该有效。

ul
{
    list-style:none;
    overflow:hidden;
}