我希望div"nav"向右浮动并内联显示其div。此外,当我调整浏览器大小时,我希望"nav"在"徽标"下滑动,并且这样做不会在徽标下方留下div,而其他div则在徽标下方。
这是 HTML:
<div id="header-container">
<div id="header-wrap">
<div class="left logo logoimg">
<img src="images/Logo-Robert_Fikes_IV.png"/>
</div>
<div class="right nav">
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
</div>
</div>
</div>
和 CSS:
body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
img {
max-width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
height: 200px;
}
#header-wrap{
padding: 0px 40px 0px;
max-height: 100%;
}
.logo{
max-width: 440px;
width: 100%;
}
.logoimg{
}
.nav{
margin-top: 20px;
}
.bluebutton{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 8px 8px;
margin: 0px 0px 0px 5px;
}
http://jsfiddle.net/wse63zzk/
完成。我将导航divs
更改为li
元素,当然父div
更改为ul
。这确实是您应该为语义HTML制作导航菜单的方式。
然后我只是添加了以下 CSS:
.nav {
margin-top: 20px;
list-style-type:none;
}
.right.nav li {
float:right;
}
小提琴