Zeige Liste in derselben Zeile

Question

Versuchte alles, zog den ursprünglichen Code von w3schools und versuchte es selbst zu bearbeiten, aber verlor bei der Ausgabe. Ich habe versucht, das Display einzublenden: Inline; und versuchte einige der anderen Antworten auf die Fragen hier, aber ohne Erfolg.

/* Div setup */ 
 

 
.wrapper { 
 
    width: 650px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    font-family: Verdana; 
 
} 
 

 
.header { 
 
    background-color:#333; 
 
    padding: 0 0 0 20px; 
 
    width:100%; 
 
    height: 50px; 
 

 
    color: white; 
 
    text-align: left; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
    font-size: 20px; 
 
} 
 

 
.nav { 
 
    width: 100px; 
 
    float; none; 
 

 
    font-size: 12px; 
 
} 
 

 
.content { 
 
    width:500px; 
 
    float:left; 
 

 
    font-size: 12px; 
 
} 
 

 
.side { 
 
    width:150px; 
 
    float:left; 
 

 
    font-size: 12px; 
 
} 
 

 
.footer { 
 
    background-color:black; 
 
    clear: both; 
 
    width: 100%; 
 
    height: 30px; 
 

 
    text-align: center; 
 
    color: white; 
 
    line-height: 30px; 
 
    white-space: nowrap; 
 
    font-size: 12px; 
 
} 
 

 
/* Navigation Bar Settings */ 
 

 
.nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #666; 
 
    width: 100%; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
} 
 

 
.nav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.nav li a:hover { 
 
    background-color: #111; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <p>The <b>Time Traveller</b> Bookstore</p> 
 
    </div> 
 

 
    <div class="nav"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">The Vault</a></li> 
 
     <li><a href="#">Order</a></li> 
 
     <li><a href="#">Report</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo libero, feugiat at est nec, fringilla pellentesque massa. Aenean mattis mauris quis nunc interdum tincidunt. Quisque ipsum est, pharetra aliquam dapibus vestibulum, laoreet sit amet metus. Nulla vitae lorem eros. In dictum tincidunt nisl in eleifend. Pellentesque molestie nulla et eros vestibulum, ut scelerisque enim lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nec commodo tellus.</p> 
 
    <p>Fusce facilisis, ex eu tristique aliquet, nulla sapien fermentum nunc, at elementum ex leo eget metus. Nunc interdum sapien lacus, eu iaculis eros dapibus eget. Ut vitae orci varius, elementum libero nec, semper elit. Aliquam pretium rhoncus arcu, ultrices consectetur magna tempus vel. Suspendisse eu euismod lectus. Proin ut diam ornare ligula tincidunt ornare eget fermentum nisi. Pellentesque ligula augue, interdum a turpis eu, lacinia congue odio. Integer ut lorem ut nisl tincidunt tempus eu id purus. Quisque vehicula ipsum sed nulla commodo, in semper augue cursus. Aenean faucibus odio mi, congue tempus ante iaculis nec. Etiam non elit at sem blandit rhoncus ut non tellus. Donec condimentum augue non nulla vestibulum, sit amet interdum quam fringilla. Maecenas scelerisque aliquam purus, at ultricies odio.</p> 
 
    </div> 
 

 
    <div class="side"> 
 
    <p>Advert</p> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <p>Footer</p> 
 
    </div> 
 
</div>

Es Ausgeben vertikal zur Zeit.

Vielen Dank im Voraus für die Hilfe.

Answer 1

entfernen width: 100px auf .nav und setzen display: inline-block auf .nav li

/* Div setup */ 
 

 
.wrapper { 
 
    width: 650px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    font-family: Verdana; 
 
} 
 

 
.header { 
 
    background-color:#333; 
 
    padding: 0 0 0 20px; 
 
    width:100%; 
 
    height: 50px; 
 

 
    color: white; 
 
    text-align: left; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
    font-size: 20px; 
 
} 
 

 
.nav { 
 
    /*width: 100px;*/  /* 1 */ 
 
    float: none; 
 
    font-size: 12px; 
 
} 
 

 
.nav li { 
 
    display: inline-block; /* 2 */ 
 
} 
 

 
.content { 
 
    width:500px; 
 
    float:left; 
 

 
    font-size: 12px; 
 
} 
 

 
.side { 
 
    width:150px; 
 
    float:left; 
 

 
    font-size: 12px; 
 
} 
 

 
.footer { 
 
    background-color:black; 
 
    clear: both; 
 
    width: 100%; 
 
    height: 30px; 
 

 
    text-align: center; 
 
    color: white; 
 
    line-height: 30px; 
 
    white-space: nowrap; 
 
    font-size: 12px; 
 
} 
 

 
/* Navigation Bar Settings */ 
 

 
.nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #666; 
 
    width: 100%; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
} 
 

 
.nav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.nav li a:hover { 
 
    background-color: #111; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <p>The <b>Time Traveller</b> Bookstore</p> 
 
    </div> 
 

 
    <div class="nav"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">The Vault</a></li> 
 
     <li><a href="#">Order</a></li> 
 
     <li><a href="#">Report</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo libero, feugiat at est nec, fringilla pellentesque massa. Aenean mattis mauris quis nunc interdum tincidunt. Quisque ipsum est, pharetra aliquam dapibus vestibulum, laoreet sit amet metus. Nulla vitae lorem eros. In dictum tincidunt nisl in eleifend. Pellentesque molestie nulla et eros vestibulum, ut scelerisque enim lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nec commodo tellus.</p> 
 
    <p>Fusce facilisis, ex eu tristique aliquet, nulla sapien fermentum nunc, at elementum ex leo eget metus. Nunc interdum sapien lacus, eu iaculis eros dapibus eget. Ut vitae orci varius, elementum libero nec, semper elit. Aliquam pretium rhoncus arcu, ultrices consectetur magna tempus vel. Suspendisse eu euismod lectus. Proin ut diam ornare ligula tincidunt ornare eget fermentum nisi. Pellentesque ligula augue, interdum a turpis eu, lacinia congue odio. Integer ut lorem ut nisl tincidunt tempus eu id purus. Quisque vehicula ipsum sed nulla commodo, in semper augue cursus. Aenean faucibus odio mi, congue tempus ante iaculis nec. Etiam non elit at sem blandit rhoncus ut non tellus. Donec condimentum augue non nulla vestibulum, sit amet interdum quam fringilla. Maecenas scelerisque aliquam purus, at ultricies odio.</p> 
 
    </div> 
 

 
    <div class="side"> 
 
    <p>Advert</p> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <p>Footer</p> 
 
    </div> 
 
</div>

Answer 2

.nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #666; 
 
    width: 100%; 
 
} 
 
.nav li { 
 
    display: inline-block;     /* simply set to inline-block */ 
 
} 
 
.nav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.nav li a:hover { 
 
    background-color: #111; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About Us</a> 
 
    </li> 
 
    <li><a href="#">The Vault</a> 
 
    </li> 
 
    <li><a href="#">Order</a> 
 
    </li> 
 
    <li><a href="#">Report</a> 
 
    </li> 
 
    </ul> 
 
</div>