Question

您好我正在尝试制作导航栏，但遇到了一些麻烦。

这是我的代码：

HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Input Page</title>
        <link rel="stylesheet" type="text/css" href="enhance.css">
        <meta charset = "utf-8" />  
    </head> 
    <body>
        <div class = "top">
            <table class="navbar"> 
                    <tr>
                        <th colspan = "4" class = "first"> BuyBuyBuy </th>
                        <th class = "entry">Test</th>
                        <th class = "entry">Test1</th>
                        <th class = "entry">Test2</th>
                    </tr>
            </table>
        </div>
        <div>
            <p>
                Page Content
            </p>    
        </div>
    </body>
</html>

CSS

table.navbar{
    background-color: black;
    width: 100%;
}

table tr th{
    height: 50px;
    color: black;
    font-size: 40px;
    color: orange;
}

th.first{
    text-align: left;   
}

th.entry{
    text-align: center;
    padding: 10px;
    width: 20%;
}

th.entry:hover{
    color: black;
    background-color: orange;
}

div.top{
    margin: 0;

}

我正在尝试创建一个基本上看起来像当前页面顶部的导航栏。（StackExchange导航栏）

我的第一个问题是，在编译上面的代码时，我注意到桌子周围有一个空白边框，禁止桌子跨越页面的整个宽度。我想消除这个。这种情况导致了我的第二个问题，那就是我无法将表格固定在网页的左上角。

任何帮助将不胜感激。谢谢。链接到JSFiddle：http://jsfiddle.net/8WNLL/

Answer 1

如果要创建导航栏，请避免使用表格。请改用<nav>或<ul>。我更改了您创建的代码以实现您想要的输出。请检查它。

Fiddle Demo

<强> HTML

<div class="navbar">
    <ul>
        <li> <a class="active" href="#"> BuyBuyBuy </a> 
        </li>
        <li> <a href="#">Test</a>

        </li>
        <li><a href="#">Test1</a>

        </li>
        <li><a href="#">Test2</a>

        </li>
    </ul>
</div>
<div class="page-content">
    <p>Page conent goes here</p>
</div>

<强> CSS

.navbar {
    overflow:hidden;
}
.navbar ul {
    list-style-type:none;
}
.navbar li {
    background-color: #333;
    float:left;
    margin-right:7px;
}
.navbar .active, .navbar a:hover {
    background:#ff9900;
}
.navbar a {
    color:#fff;
    display:block;
    padding:6px 12px 6px 12px;
    text-decoration:none;
}
.page-content {
    clear:left;
}

Answer 2

只是抛出一种不同的方法 - 不能用于下拉菜单 - 只需点击一个简单的链接。

你可以制作一系列锚标签并按照你想要的方式设计它们。

FIDDLE

CSS

.navholder {
    width: 500px;
    margin: 30px auto;
}
a {
    display: inline- block;
    height: 50px;
    padding: 15px;
    margin-left: 10px;
    background-color: #333;
    text-decoration: none;
    color: white;
}
a:first-child {
    background-color: orange;
}

Answer 3

不要将表用于导航栏。我建议你使用无序列表。

这可能会对您有所帮助：http://www.w3schools.com/css/css_navbar.asp

在CSS中定位表

3 个答案:

Fiddle Demo