2

嗨，我想将导航定位在标题中我的站点名称旁边，但事实证明这很困难，我不得不使用 position:absoutle 和 margins 但我必须输入负数才能使其正确显示。

我想知道是否有更简单的方法可以让这些并排显示？

单击此处查看JSFiddle！

或者在下面查看我的代码：

索引.html

<header>
<h1>iManage</h1>
 <nav>
    <ul class="maina">
        <li><a href="Home">Home</a></li>
        <li><a href="Projects">Projects</a></li>
        <li><a href="Settings">Settings</a></li>
    </ul>
</nav>
  </header>

样式.css

header {
 width:auto;
height:50px;
background-color:#374348;
 }

header > h1 {
font-size:16px;
font-weight:bold;
text-align:left;
color:#FFF;
padding:10px;   
}


.maina > li  {
display:inline; 
list-style:none;
}

header > nav {
text-align:center;
width:300px;
height:auto;
border:medium #999;
 position:absoulte;
top:0;
margin: -50px 0px 0px 60px;
}
4

4 回答 4

4

嗯，这是正确的做法......

说明：你需要float你的h1to left, navelement 也一样，现在怎么float办？它将float您的元素移到left此处，这将在浮动元素的右侧创建一个空白空间，这将为您腾出一些空间nav来向上移动，而不是.clear:after用于自我清除父元素，您也可以overflow: hidden;使用.clear:after（因为 IE 会在这里破坏你的游戏）...

您还可以阅读我的这个答案，它将向您解释使用清除浮动元素的概念clear: both;以及为什么需要清除它们。

演示

header {
    width:auto; /* You don't need this too */
    height:50px;
    background-color:#374348;
}

header > h1 {
    font-size:16px;
    font-weight:bold;
    float: left;
    color:#FFF;
    padding:10px;   
}


.maina > li  {
    display:inline; 
    list-style:none;
}

header > nav {
    width:300px;
    height:auto;
    border:medium #999;
    float: left;
    margin: 10px;
}

.clear:after {
    content: "";
    display: table;
    clear: both;
}

小贴士：一般你想在你的菜单项上有margin和padding，我建议你用display: inline-block;代替，如果你真的不觉得需要用 ，block你也可以去掉。>

最后但并非最不重要的一点是，您使用header的是 HTML5 元素，因此请确保您使用的是 HTML5 Reset 样式表，它将声明其他元素，例如, ，例如footerHTML5 asideDoctor navStylesheet Resetdisplay: block;

于 2013-08-28T13:45:50.960 回答
0

你可以使用 float:left; 为了更容易，请在此处了解此内容：http: //www.w3schools.com/css/css_float.asp

于 2013-08-28T13:46:03.143 回答
0

您可以将“h1”和“nav”都设置为显示：inline-block。

于 2013-08-28T13:46:10.173 回答
0

您有两个选择，首先您可以将 H1 和 Nav 元素都设置为 float:left，但请记住在 header 标记后面的元素上清除:both。删除 Position:absolute、top:0 和 Margin，你应该可以开始了。

让我知道你是怎么办的。阿杰

于 2013-08-28T13:49:22.677 回答