Question

我正在尝试将导航栏放在标题旁边，但它会强制导航顶部的标题。如果你不知道我的意思，这就是我想要标题和导航菜单的布局： Snow Candy＆lt; -

这是我得到的HTML：

<div id="header">
<h1>Logo</h1>
<ul id="nav">

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

</ul></div>
<div id="content">
<h1>Header One</h1>
</div>

这是我得到的CSS：

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#header{
float: right;
}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}

#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}

Answer 1

好的，亨利。

我在css中添加了一些代码 - http://jsfiddle.net/JET4v/2/

还添加了包装器以使其全部受控制。

这基本上表示#header和#content旁边没有任何东西 #header
#header h1 #header #nav #content #wrap也将是漂浮在左边。
#wrap { margin: 0 auto; width: 700px; } #header, #content{ clear: both; } #header, #header h1, #header #nav { float: left; }基本上是自我中心。
```
#content
```

请注意，您可能也想要添加宽度和高度值，但当然不是#wrap的高度。

如果你想使用{{1}}，你应该知道它应该是你最宽元素的宽度

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

1 个答案: