Question

我需要将徽标图像和导航栏放在同一方向上。

这是我的HTML代码：

<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" /> 
</div>
<nav class = "navigation">
<ul>
<li><a href = "#">HOME</a></li>
<li><a href = "#">ABOUT</a> </li>
<li><a href = "#">HAIRSTYLES</a> </li>
<li><a href = "#">NEWS</a> </li>
<li><a href = "#">CONTACT</a> </li>
</ul>
</nav>
</div>
</div>

和css：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,nav {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
body
{
    font-family:Arial;
    font-size:14px;
}
#header {
        float:left;
        min-width:100%;
        background-color:Aqua;
    }
    #header .logo
    {
        width:400px;
        float:left;
    }
    #header nav 
    {
        width:400px;
        float:right;
    }
.wrap
{
    margin:0 auto;
    width:900px;
}
nav ul li
{
    display:inline-block;
    padding-right:10px;
    list-style:none;
}
nav ul li a
{
    text-decoration:none;
}
a:link, a:active, a:visted
{
    text-decoration:none;
}
a:hover
{
    text-decoration:underline;
    color:Fuchsia;
}

结果如下所示http://imgur.com/zbZy2qF

所以我需要同一方向的导航栏和徽标。

有人能帮助我吗？

提前致谢。

任何帮助都将受到高度赞赏。

Answer 1

改变这个：

#header .logo
    {
        width:400px;
        float:left;
    }

为：

#header .logo
    {
        width:400px;
        float:right;
    }

看，如果有帮助。

Answer 2

将行高设为nav ul li a，与.logo示例demo相同

nav ul li a
{
    text-decoration:none;
    line-height:50px;
}
.logo img{
    height:50px;
}

Answer 3

检查这是否对您有所帮助。删除#header .logo和#header nav的浮点数，并生成这些div display:inline-block。 Fiddle

#header .logo,
#header nav 
{
    width:400px;
    display: inline-block;
    vertical-align:middle;
}

css导航和徽标相同的位置问题

3 个答案: