Question

这是我的网页到目前为止的显示方式：What I have so far...

我想向上移动导航栏并使用文字“TEST”垂直居中。

这是我的HTML：

<div class="container">
        <h1 class="logo">SIMPLICITY</h1>
        <div class="nav-container">
        <ul id="nav">
            <li><a href="#">HOMEPAGES</a>
                <ul>
                    <li><a href="#">homepage 2</a></li>
                    <li><a href="#">homepage 3</a></li>
                    <li><a href="#">homepage 4</a></li>
                    <li><a href="#">homepage 5</a></li>
                </ul>
            </li>
            <li><a href="#">SAMPLE PAGES</a>
                <ul>
                    <li><a href="#">about us</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">our team</a></li>
                    <li><a href="#">faq</a></li>
                    <li><a href="#">coming soon</a></li>
                    <li><a href="#">error 404</a></li>
                    <li><a href="#">pricing tables</a></li>
                    <li><a href="#">left sidebar</a></li>
                    <li><a href="#">right sidebar</a></li>
                    <li><a href="#">both sidebar</a></li>
                    <li><a href="#">full width</a></li>
                    <li><a href="#">portfolio</a></li>
                </ul>
            </li>
            <li><a href="#">SHORTCODES</a>
                <ul>
                    <li><a href="#">accordion</a></li>
                    <li><a href="#">buttons</a></li>
                    <li><a href="#">callout</a></li>
                    <li><a href="#">columns</a></li>
                    <li><a href="#">divider</a></li>
                    <li><a href="#">list</a></li>
                    <li><a href="#">message box</a></li>
                    <li><a href="#">pricing table</a></li>
                    <li><a href="#">tab</a></li>
                    <li><a href="#">testimonials</a></li>
                    <li><a href="#">toggle</a></li>
                    <li><a href="#">twitter</a></li>
                </ul>
            </li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul><!-- nav -->
        </div>
    </div><!-- header container -->

这是我的CSS：

h1{
    font-family:bebas;
    font-size:48px;
    margin:0;
}

body{
    margin:0;
    padding:0;
    background-color:red;
}

header{
    background-color:white;
    margin:0;
}

.toolbar{
    background-color:#2d2d2d;
    width:100%;
    height:35px;
}

.container{
    width:960px;
    margin:0 auto;
}

.logo{
    padding-top:15px;
    padding-bottom:20px;
    color:#2d2d2d;
}

.nav-container{
    float:right;
}

#nav{
    list-style:none;
    font-weight:300;
    font-family: 'Open Sans', sans-serif;
    margin-bottom:10px;
    float:right;
    width:100%;
    position:relative;
    z-index:5;
}

#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}

#nav a{
    display:block;
    padding:5px;
    color:#2d2d2d;
    text-decoration:none;
}

#nav a:hover{
    color:#000000;
}

#nav ul{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:#fff;
    padding-left:10px;
    padding-top:9px;
    padding-bottom:9px;
    list-style:none;
    position:absolute;
    left:-9999px;
    /*-webkit-box-shadow: 4px 4px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 4px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 4px 10px rgba(50, 50, 50, 0.75);*/
}

#nav ul li{
    padding-top:1px;
    padding-bottom:1px;
    float:none;
    background:#ffffff;
    font-size:15px;
    width:150px;
}

#nav ul a{
    white-space:nowrap;
}

#nav li:hover ul{
    left:0;
}

#nav li:hover a{
    /*background:#6b0c36;*/
    /*text-decoration:underline;*/
}

#nav li:hover ul a{
    text-decoration:none;
}

#nav li:hover ul li a:hover{
    background:#008ed7;
    color:#fff;
}

有一种简单的方法吗？

Answer 1

将徽标浮动到左侧。然后，将适当的边距添加到导航容器中。

.logo {
    float:left; /* alternatively, could use position:absolute; */
    /* other css */
}

.nav-container {
    margin-top: 12px;
    /* other css */
}

See Fiddle

Answer 2

.logo 
{
    float:left;
}

#nav
{
    padding-top: 18px;
    float: left;
}
.nav-container
{
    float: left;
}

Currenty float：right定义为#nav，而.nav-container定义为float：left。相应地添加其他样式。

<强> DEMO

Answer 3

只需在css中添加以下代码即可。

.logo {
    float:left;
    /* other css */
}
#nav {
   margin-top:25px;
}

以下是工作示例：http://jsfiddle.net/GawvT/

垂直对齐徽标和导航栏？

3 个答案: