我尝试使用无序列表创建导航菜单,然后让它水平显示。每个li都有一个div标签,里面有更多div,用于更多样式,但是,列表似乎正在下降,但没有显示任何内容。这是JSFiddle:http://jsfiddle.net/E8jqN/2/
另外,它的html是:
<div id="header-right">
<ul id="navigation">
<li>
<div class="nav-button">
<div id="schools">
</div>
</div>
<div class="nav-text">
Schools
</div>
</li>
<li>
<div class="nav-button">
<div id="professors">
</div>
</div>
<div class="nav-text">
Professors
</div>
</li>
<li>
<div class="nav-button">
<div class="Programs">
</div>
</div>
<div class="nav-text">
Programs
</div>
</li>
<li>
<div class="nav-button">
<div class="account">
</div>
</div>
<div class="nav-text">
My Account
</div>
</li>
</ul>
</div>
和css是:
#header-right{
float: right;
width: 366px;
height: 64px;
background-image:url('http://localhost/gradebyme/gradebyme/public/img/midtile2.png');
background-repeat:repeat-x;
}
#navigation{
/* position: relative;
background: url('http://localhost/gradebyme/gradebyme/public/img/icontest.png');*/
margin: 0;
padding: 0;
list-style: none;
}
#navigation li{
width: 88px;
height: 64px;
display: inline;
}
.nav-button{
width: 88px;
height: 40px;
}
.nav-text{
width: 88px;
height: 24px;
color:blue;
}
#schools{
float: left;
width: 37px;
height: 26.75px;
/* background-position: 0 0;*/
}
#professors{
float: left;
width: 37px;
height: 26.75px;
/* background-position: 0 -27px;*/
}
#programs{
float: left;
width: 37px;
height: 26.75px;
background-color: green;
/* background-position: 0 -55px;*/
}
#account{
float: left;
width: 37px;
height: 26.75px;
background-color: purple;
/* background-position: 0 -83px;*/
}
我需要它全部水平显示,然后我可以添加图标。任何帮助表示赞赏!此外,一般的CSS提示也很受欢迎,我很新。
答案 0 :(得分:0)
使用样式为float的div:left
包裹导航按钮和导航文本答案 1 :(得分:0)
如果我明白了你想要的内容,你只需向float:left;
添加#navigation li
即可。
答案 2 :(得分:0)
#navigation li{
float: right;
width: 88px;
height: 64px;}
或
#navigation li{
width: 88px;
height: 64px;
display: inline-block;}