如何正確地創建我的段落和列表內聯？

所以我有這個HTML &即時通訊編碼，試圖在同一行上。我很確定他們是封鎖線，這就是爲什麼他們不在同一條線上。我如何正確地讓他們留在網站上的同一行？對不起使用jsFiddle，我真的嘗試過。如何正確地創建我的段落和列表內聯？

我第一次嘗試：

<!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; 
}

正如你可以看到他們是不是在同一行所以我所做的就是我試圖把它們放在一個div，這是什麼我來了你。他們在同一條線上，但我覺得我做得不好。

<!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; 
}

來源

2017-06-18 Christoffer Nilsson

的一種方式做到這一點...

.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>

來源

2017-06-18 21:27:06

哪裏的「U」來自於.headerLogoAndMenu∪{？ –

@ChristofferNilsson對不起，它應該是'ul'。對於這個簡單的代碼片段，並不是真的需要，但是指定表格單元很有用 –

有沒有辦法讓列表項並排排列而不是相互排列呢？ –

另一種方式來做到這一點

.headerLogoAndMenu { 
 
    display: flex; 
 
} 
 

 
.headerLogoAndMenu ul { 
 
    display: flex; 
 
}

<!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>

來源

2017-06-18 21:29:20

我用flexboxes爲標誌和菜單的佈局。垂直對齊已經安排在中心。

.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>

來源

2017-06-18 21:33:32 Gerard

如何正確地創建我的段落和列表內聯？

回答

相關問題