Question

我正在制作我的第一个网站，所以这个问题可能是一种noobie ^^。我希望我的标题（图像）和导航栏彼此相邻。但它不会起作用

屏幕：

当我们修复它时，我希望导航栏与标题一样大。所以非常适合！

有人可以帮我吗？我无法以某种方式粘贴代码，所以这里是一个jsfiddle

<!DOCTYPE html>

Answer 1

尝试将此作为#nav

的css

#nav {
position:relative;
background:#000000;
text-align:center;
width:75%;
left:25%;
top:0px;
margin-top:-34px;   }

这对我有用，希望这会有所帮助：）

编辑:(我只是略微改变了，因为实现了更好的解决方案）

高度问题：

#headerbg {
position:relative;
background:#000000;
text-align:center;
width:25%;
height:209px;
margin-top:-8px;
}
#nav {
position:relative;
background:#000000;
text-align:center;
float:right;
width:75%;
top:0px;
margin-top:-240px;
height:240px;
}

这应该可行，但您可能需要更改一些值，因为div往往比它们包含的图像略大。

Answer 2

抱歉，我很难读你的代码，但你想要导航栏的最终结果与我正在处理的网站非常相似，所以欢迎你使用/借用它的零件。 http://jsfiddle.net/qx2YX/

http://jsfiddle.net/qx2YX/embedded/result/

HTML：

<!--LOGO AND NAVIGATION BAR-->
<header id="logoandnav">
<div id="mainlogodiv">
    <img id="mainlogo" src="images/logo.png" alt="" />
</div>
<nav>
    <ul class="navlist">
        <li><a class="navigation" href="index.html">Home</a></li>
        <li><a class="navigation" href="about.html">About Us</a></li>
        <li><a class="navigation" href="gallery.html">Gallery</a></li>
        <li><a class="navigation" href="sponsors.html">Sponsors</a></li>
        <li><a class="navigation" href="contact.html">Contact</a></li>
    </ul>
</nav>

CSS：

body {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    background-color: #e8eae9;
    font-size: 62.5%;
    margin: auto;
}
::selection {
    background: #8ec63f; /* Safari */
}
::-moz-selection {
    background: #8ec63f; /* Firefox */
}

#logoandnav {
    background-color: #0b0f0c;
    height: 112px;
    margin-top: 0px;
    line-height: 112px;
}
#logoandnav:before {
    width: 100%;
    height: inherit;
    display: block;
    position: absolute;
    content:"";
    left: 0;
    z-index: -1;
    background-color: inherit;
}

/* MAIN LOGO */
 #mainlogodiv {
    float: left;
    line-height: 112px;
    display: inline-block;
}
#mainlogo {
    vertical-align: middle;
}

/* NAVIGATION MENU */
 nav {
    float: right;
    display: inline-block;
    height: 112px;
    line-height: 112px;
}
ul.navlist li {
    height: 112px;
    list-style-type: none;
    display: inline-block;
}
ul.navlist {
    margin-top: 0px;
    margin-bottom: 0px;
}
a.navigation:link, a.navigation:visited {
    font-family:'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #e2e2e2;
    padding: 15px;
    text-transform: uppercase;
    text-decoration: none;
    height: 112px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
a.navigation:hover, a.navigation:active {
    color: #0b0f0c;
    background-color: #8ec63f;
}

我会将此作为评论添加，但我没有足够的声誉。

不能将标题和导航栏放在一起

2 个答案: