Wie stelle ich meinen Absatz und meine Liste korrekt zusammen?

So habe ich diese HTML & CSS-Code, die ich versuche, auf der gleichen Linie zu bekommen. Ich bin mir ziemlich sicher, dass sie Blocklinie sind, deshalb sind sie nicht auf der gleichen Linie. Wie kann ich sie korrekt auf der gleichen Linie auf der Website bleiben? Entschuldigung, dass ich jsFiddle nicht benutzt habe, habe ich wirklich versucht.Wie stelle ich meinen Absatz und meine Liste korrekt zusammen?

Mein erster Versuch:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Product Showcase</title> 
    </head> 
    <body> 
    <p id="Logo">VARGA NET</p> 
     <ul id="navigation"> 
     <li>SPECIFICATIONS</li> 
     <li>LOOK AT IT</li> 
     <li>FEATURES</li> 
     <li>FREE</li> 
     <li>TESTIMONIALS</li> 
     <li>HOME</li> 
     </ul> 
    </body> 
</html>

CSS

body { 
    background-image: url(Images/background.png); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

#Logo{ 
    color: White; 
    font-size: 20px; 
    font-weight: bold; 
    font-family: sans-serif; 
    padding-left: 60px; 
    padding-top: 20px; 
} 

li{ 
    color: white; 
    float: right; 
    padding: 8px; 
    display: inline; 
    list-style: none; 
}

Wie Sie sehen können sie nicht auf der gleichen Linie sind so, was ich tat, war ich versucht, sie in einem div setzen und das ist, was Ich bin mit dir gekommen. Sie sind auf der gleichen Linie, aber ich habe das Gefühl, dass ich es schlecht gemacht habe.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Product Showcase</title> 
    </head> 
    <body> 
      <div inline-block class="headerLogoAndMenu"> 
      <p id="Logo">VARGA NET</p> 
      <ul id="navigation"> 
       <li>SPECIFICATIONS</li> 
       <li>BUY NOW</li> 
       <li>FEATURES</li> 
       <li>PRICE</li> 
       <li>TESTIMONIALS</li> 
       <li>HOME</li> 
      </ul> 
      </div> 
    </body> 
</html>

CSS

.headerLogoAndMenu li{ 
    font-family: sans-serif; 
    transition:0.5s; 
    color: white; 
    float: right; 
    padding-right: 8px; 
    padding-left: 8px; 
    padding-top: 16px; 
    display: inline; 
    list-style: none; 
} 
.headerLogoAndMenu #Logo{ 
    font-family: sans-serif; 
    transition:0.5s; 
    color: white; 
    float: right; 
    display: inline; 
    list-style: none; 
}

Quelle

2017-06-18 Christoffer Nilsson

Ein Weg, dies zu tun ...

.headerLogoAndMenu { 
 
    display: table; 
 
} 
 

 
.headerLogoAndMenu p { 
 
    display: table-cell; 
 
} 
 

 
.headerLogoAndMenu ul { 
 
    display: table-cell; 
 
} 
 

 
.headerLogoAndMenu ul li { 
 
    display: table-cell; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <title>Product Showcase</title> 
 
    </head> 
 
    <body> 
 
    <div class="headerLogoAndMenu"> 
 
     <p id="Logo">VARGA NET</p> 
 
     <ul id="navigation"> 
 
     <li>SPECIFICATIONS</li> 
 
     <li>BUY NOW</li> 
 
     <li>FEATURES</li> 
 
     <li>PRICE</li> 
 
     <li>TESTIMONIALS</li> 
 
     <li>HOME</li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-06-18 21:27:06

Wo kommt das "u" kommen aus in .headerLogoAndMenu u {? –

@ChristofferNilsson Entschuldigung, es sollte "ul" sein. Für dieses einfache Snippet ist es nicht wirklich erforderlich, aber es ist gut, eine Tabellenzelle anzugeben –

Gibt es eine Möglichkeit, die Listenelemente nebeneinander statt übereinander zu platzieren? –

Ein anderer Weg, um dieses

zu tun

Quelle

2017-06-18 21:29:20

I verwendet flexboxes für das Layout des Logos und Menüs. Die vertikale Ausrichtung wurde in der Mitte angeordnet.

.headerLogoAndMenu { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
#navigation { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: center; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.headerLogoAndMenu li { 
 
    font-family: sans-serif; 
 
    font-size: 10px; 
 
    padding-right: 4px; 
 
    padding-left: 4px; 
 
    list-style: none; 
 
} 
 

 
#Logo { 
 
    font-family: sans-serif; 
 
}

<div class="headerLogoAndMenu"> 
 
    <p id="Logo">VARGA NET</p> 
 
    <ul id="navigation"> 
 
    <li>SPECIFICATIONS</li> 
 
    <li>BUY NOW</li> 
 
    <li>FEATURES</li> 
 
    <li>PRICE</li> 
 
    <li>TESTIMONIALS</li> 
 
    <li>HOME</li> 
 
    </ul> 
 
</div>

Quelle

2017-06-18 21:33:32 Gerard

Wie stelle ich meinen Absatz und meine Liste korrekt zusammen?

Antwort

Verwandte Themen