为什么在我的导航栏之后我的表格没有从新行开始？答案

【问题标题】：Why doesn't my table start on a new line when after my navigation bar?为什么在我的导航栏之后我的表格没有从新行开始？
【发布时间】：2014-02-06 02:59:42
【问题描述】：

我正在建立一个网站，但遇到了一个错误。我有我的导航栏，以及所有这些，现在我正试图让表格换行。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="css/topbar.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="navbar">
    <div class="navbar">
        <ul class ="menu" rel="sam1">
            <li class="active"><a href="Home.htm">Home</a></li>
            <li><a href="Compare.htm">Compare Products</a></li>
            <li><a href="Contact.htm">Contact</a></li>
            <li><a href="Download.htm">Download</a></li>
        </ul>
    </div>
</div>
<table>
    <td>Hi</td>
</table>

</body>
<footer>
</footer>
</html>

CSS：

.header
{
    width:100%;
    height:80px;
    background:#939393;
    background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top:1px solid #939393;
    position:relative;
    margin-bottom:30px;

}
body
{
    margin:0;
}
ul 
{
    margin:0;
    padding:0;
}

ul.menu 
{
    height:80px;
    width:100%;
    float:left;
}
ul.menu li 
{
    overflow:hidden;
    width:25%;
    list-style: none;
    float:left;
    height:79px;
    text-align:center;
    background:-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background:-moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul li a 
{
    display:block;
    padding:0 20px;
    border-left:1px solid rgba(255,255,255,0.1);
    border-right:1px solid rgba(0,0,0,0.1);
    text-align:center;
    line-height:79px;
    background:-webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background:-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 1500ms;
    -moz-transition-property:background;
    -moz-transition-duration:1500ms;
}

ul li a:hover 
{
    background:transparent none;
}

ul li.active a
{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

当我运行我的代码时，它会在我的网页底部添加一个滚动条，它使表格显示如下：

有什么办法可以解决吗？让它去一个新的生产线？

我现在可以通过添加4个<br>标签来做这件事真的很草率，但我认为这不是很专业。

【问题讨论】：

标签： html css html-table alignment

【解决方案1】：

从 ul: 中移除 float:left

 ul.menu 
{
    height:80px;
    width:100%;

}

http://jsfiddle.net/uxp4x/

【讨论】：

谢谢你，解决了。您还必须发布 jsfiddle 链接... :)

【解决方案2】：

我把你的示例代码放在这里

http://jsbin.com/AwuwAzU/4/

并添加

.navbar {
 clear:right;

}

让“嗨”这个词换行就是你想要的

【讨论】：

【解决方案3】：

您要么必须删除：

float:left;

来自：

ul.menu
{
    height:80px;
    width:100%;
    float:left;
}

或者你可以添加：

.navbar 
{
    clear:right;

}

这将删除右侧的所有内容。

【讨论】：

谢谢！这解决了我的问题！感谢您的选择！