如何將文本放在HTML中的同一行上？

在學校我的地理課，我們在不同的國家和其中的一個選項進行演示是一個網站。我知道基本的html，但不是很多關於它的設計和顯示方面。現在，我在許多網站上看到了在同一行上獲取文本的許多麻煩。我的代碼目前看起來像這樣：如何將文本放在HTML中的同一行上？

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
     </head> 
     <body> 
     <font face="verdana" size=「10」>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <ul><font face="verdana" size=「10」>Borders</font></ul> 
      <ul><font face="verdana" size=「10」>Government</font></ul> 
     </ul> 
    </body> 
</html>

我也一直有麻煩鏈接其他文件到此頁面。如果你能幫上忙，那將不勝感激。這是我一直在試圖爲代碼：

<a href="borders.html">Borders</a>

我要指出，我一直在使用本地主機服務器來測試我的代碼，這是我怎麼會最終提出我的項目。

編輯：爲了澄清，我想瑞典政治地理學，邊框和政府都將在同一行。

來源

2017-12-02 Harry Potter

對於啓動它必須是Borders不Borders – Radu

你需要CSS的一點點這種解決方案。我會從那開始。

如果您有目錄中的所有HTML文件，繼續前進，創建一個名爲index.css或任何你喜歡一個CSS文件，只要擴展名是CSS。裏面每個.html文件的<head></head>把這個鏈接（改變你的CSS文件的名稱，如果你沒有使用index.css）：

<link rel="stylesheet" type="text/css" href="index.css">

關於你的HTML中，<ul></ul>元素真正的意思包含列表與每個項目被定義爲<li></li>項目，即使只有一個項目。知道了，它應該看起來更像這個有點：

<font face="verdana" size=「10」>Swedish Political Geography</font> 
<ul class="navigation"> 
    <li><font face="verdana" size=「10」>Borders</font></li> 
    <li><font face="verdana" size=「10」>Government</font></li> 
</ul>

<ul>和<li>元素是塊級元素，這意味着它們會佔用的可用寬度的100％。我們希望將這些元素更改爲inline-block元素，這些元素將它們與文本內聯對齊，但仍然使您能夠將它們視爲塊級元素。

對於這一點，這個下降到你的CSS文件：

ul { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
}

...併爲<li>：

li { 
    display: inline-block; 
}

應該很接近了，但你會發現從子彈名單仍然懸而未決。讓我們去掉那些：

ul { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

添加list-style-type: none;告訴<li>不顯示任何一種裝飾功能。

你現在應該有一個連續的文本行！

實施例：

<font face="verdana" size=「10」>Swedish Political Geography</font> 
 
<ul class="navigation"> 
 
    <li><font face="verdana" size=「10」>Borders</font></li> 
 
    <li><font face="verdana" size=「10」>Government</font></li> 
 
</ul>

來源

2017-12-02 20:35:54

UL - 是一個塊元件，就需要把它轉化爲直列元件

顯示：內聯;

在樣式就像這樣（或者你的CSS文件中）：

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Swedish Political Geography</title> 
      <style> 
       ul.navigation { 
       margin: 0; 
       padding: 4px; 
       } 
       ul.navigation li { 
       display: inline; 
       margin-right: 5px; 
       } 
      </style> 
     </head> 
     <body> 
     <font face="verdana" size=「10」>Swedish Political Geography</font> 
     <ul class="navigation"> 
      <li><font face="verdana" size=「10」>Borders</font></li> 
      <li><font face="verdana" size=「10」>Government</font></li> 
     </ul> 
    </body> 
</html>

來源

2017-12-02 20:14:50 jlemon

想所有要在同一行 - 添加'顯示：內聯;''進ul.navigation block' – jlemon

如何將文本放在HTML中的同一行上？

回答

相關問題