Dus ik heb geprobeerd een horizontale lijst te maken voor gebruik op een nieuwe website die ik aan het ontwerpen ben. Ik heb een aantal van de suggesties geprobeerd die al online zijn gevonden, zoals het instellen van ‘float’ naar links en dergelijke – maar geen van deze heeft gewerkt als het gaat om het oplossen van het probleem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}<ul id="menuItems">
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="index.php">DJ Profiles</a>
</li>
</ul>Antwoord 1, autoriteit 100%
Bijgewerkt antwoord
Ik heb gemerkt dat veel mensen dit antwoord gebruiken, dus ik besloot het een beetje bij te werken. Als je het originele antwoord wilt zien, kijk dan hieronder. Het nieuwe antwoord laat zien hoe je wat stijl aan je lijst kunt toevoegen.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}<ul>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">another item</a>
</li>
</ul>Antwoord 2, autoriteit 7%
Deze viool laat zien hoe
ul, li {
display:inline
}
Geweldige referenties op lijsten en css hier:
http://alistapart.com/article/taminglists/
Antwoord 3, autoriteit 4%
Een veel betere manier is om inline-blockte gebruiken, omdat je clear:bothniet meer aan het einde van je lijst hoeft te gebruiken.
Probeer dit:
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Bekijk het hier: http://jsfiddle.net/shahverdy/4N6Ap/
Antwoord 4, autoriteit 3%
Je zou ook inline blokken kunnen gebruiken om zwevende elementen te vermijden
<ul>
<li>
<a href="#">some item</a>
</li>
<li>
<a href="#">another item</a>
</li>
</ul>
en dan stylen als:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
op die manier hoef je niets te floaten, waardoor er geen clearfixes meer nodig zijn
Antwoord 5, autoriteit 2%
Ik denk dat de eenvoudige oplossing die ik heb gevonden hieronder staat
ul{
display:flex;
}
Antwoord 6
Hiervindt u een werkend voorbeeld, met wat meer suggesties voor het dynamisch wijzigen van de grootte van de lijst.
Ik heb display:inline-block en een percentage opvulling gebruikt zodat de bovenliggende lijst dynamisch van grootte kan veranderen:
display:inline-block;
padding:10px 1%;
width: 30%
plus nog twee regels om opvulling voor het eerste en laatste item te verwijderen.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}