我想让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;
}
答案 0 :(得分:0)
完成。我将导航divs
更改为li
元素,当然还将父div
更改为ul
。这就是你应该如何为语义HTML制作导航菜单。
然后我添加了以下CSS:
.nav {
margin-top: 20px;
list-style-type:none;
}
.right.nav li {
float:right;
}