Kann nicht ungeordnete Liste: horizontal
Im Versuch, erstellen Sie ein nav-Menü, indem Sie eine ungeordnete Liste, und es wird dann horizontal anzeigen. Jedes li ist ein div-tag, mit mehr divs in es, für mehr styling, aber die Liste scheint zu fallen, aber nicht, dass etwas angezeigt wird. Hier ist das JSFiddle für Sie: http://jsfiddle.net/E8jqN/2/
auch, die html für Sie ist:
<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>
und das css ist:
#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;*/
}
Ich brauche es, um zu zeigen Sie alle horizontal, dann kann ich arbeiten, über das hinzufügen der icons. Jede Hilfe ist willkommen! Auch die Allgemeinen css-Tipps gibt es auch geschätzt, Im ziemlich neu für ihn.
- mögliche Duplikate von horizontale Navigationsleiste gemacht in CSS
- Sie kann keine DIVs
display: inline
Elemente. Machen die LIs -inline-block
statt. - Das klappte! WENN Sie möchten, dass eine Antwort, Kranke akzeptieren Sie es!
InformationsquelleAutor samuraiseoul | 2012-12-29
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
oder
Wrap-nav-Tasten und nav-text mit einem div-Tag, dass hat Stil float: left
Können Sie einfach fügen Sie eine
float:left;
zu Ihrem#navigation li
, wenn ich verstanden habe, was Sie wollen.http://jsfiddle.net/E8jqN/7/