Question

我试图让我的导航栏水平显示，但我无法做到。

这是我的代码：

<div class="theheader">
        <h1><a href="#">My Name</a></h1>
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <ul id="subscribe">
            <li class="facebook"><a href="#">Follow on Facebook</a></li>
            <li class="rss"><a href="#">Subscribe by RSS</a></li>
        </ul>

CSS：

#theheader {
    width: 961px; margin: 0 auto; position: relative;
    overflow: hidden;
}
    #theheader h1 a {
        position: absolute; top: 5px; left: 376px;display: block; width: 208px; height: 213px; 
        background: url(Images/Welcome.png); text-indent: -9999px;
    }
        #theheader h1 a:hover {
            background-position: bottom;
        }

    #theheader ul#nav {
        float: left; margin: 22px 0 0 24px; list-style: none;
    }
        #theheader ul#nav li {
            float: left; margin: 0 0 0 45px;
        }
            #theheader ul#nav li:first-child {
                margin: 0;
            }
                #theheader ul#nav li a {
                    display: block; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
                    text-decoration: none;
                }
                    #theheader ul#nav li a:hover {
                        color: #d0cfc8;
                    }

    #theheader ul#subscribe {
        float: right; margin: 22px 24px 0 0; list-style: none;
    }
        #theheader ul#subscribe li {
            float: left; margin: 0 0 0 32px;
        }
            #theheader ul#subscribe li a {
                display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
                text-decoration: none; padding: 1px 0 0 27px;
                background: url(images/icons.png) left 1px no-repeat;
            }
                #theheader ul#subscribe li.rss a {
                    background-position: left -16px;
                }
                    #theheader ul#subscribe li a:hover {
                        color: #d0cfc8;
                    }

http://jsfiddle.net/5AVA8/85/

我希望导航栏看起来像这样：

http://line25.com/wp-content/uploads/2010/blog-design-coded/demo/index.html#

Answer 1

您需要更改

<div class="theheader">

到

<div id="theheader">

因为您为div元素指定了ID而不是类。

Answer 2

您在CSS中使用的处理程序＃＆＃39;＃＆＃39;用于处理<div id="theheader">

等ID

但是这里有一个课程<div class="theheader">，因此您可以将其更改为ID或更改您的所有＃＆＃39;＃＆＃39;进入＆＃39;。＆＃39; （用于课程）

Answer 3

快速解决您的问题的方法是将<div class="theheader">替换为<div id="theheader">。

但我宁愿更改css并用.selector替换#selector，因为这会让你的类定义可以重用。

导航栏无法水平显示

3 个答案: