在HTML和CSS中顯示相鄰列表

我試圖在其網頁上顯示一家餐廳的菜單。我正在嘗試製作2個相鄰的列表。我已經成功地完成了這項工作，但每個列表項之間都有很大的空間。此外，單詞上的口音在網頁中沒有正確顯示。有什麼想法嗎？這裏是我的代碼：在HTML和CSS中顯示相鄰列表

#list { 
 
    display: block; 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
#list li { 
 
    display: block; 
 
    width: 50%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#list2 { 
 
    display: block; 
 
    width: 50%; 
 
    height: 80%; 
 
    float: right; 
 
} 
 

 
#list2 li { 
 
    display: block; 
 
    width: 50%; 
 
    height: 100%; 
 
    position: relative; 
 
}

<ul id="list"> 
 
    <li><dt><b>1 Chả Giò Chay</b></dt><dd>Vegetarian Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>2 Chả Giò</b></dt><dd>Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>3 Gỏi Cuốn Chay</b></dt><dd>Fresh rice paper Vegetarian Rolls(2)</dd><br></li> 
 
    <li><dt><b>4 Gỏi Cuốn</b></dt><dd>Fresh rice paper Shrimp & Pork Rolls(2)</dd><br></li> 
 
    <li><dt><b>5 Gỏi Cuốn Thịt</b></dt><dd>Fresh rice paper Pork Rolls(2)</dd><br></li> 
 
</ul> 
 
<ul id="list2"> 
 
    <li><dt><b>11 Gà Chiên Bột</b></dt><dd>Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>12 Gà Teriyaki</b></dt><dd>Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>13 Gà Đặc Biệt</b></dt><dd>Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>14 Ca Chiên</b></dt><dd>Spring Rolls(2)</dd><br></li> 
 
    <li><dt><b>15 Ca Viên Chiên</b></dt><dd>Spring Rolls(2)</dd><br></li>     
 
</ul>

來源

2016-10-30 Vivian

你是什麼問題問？看起來你有兩個...與不良空間有關，另一個與口音有關。請參閱：[如何在StackOverflow上提出問題]（http://stackoverflow.com/help/on-主題） – jacefarm

（有「帶有變音符號的拉丁字符」的字符引用，e 。G。 '＆eacute;'）。 – greybeard

它看起來像你的列表中，您添加<br>標籤。我不認爲這些是必要的。如果沒有他們，我不會在兩條線之間留下任何誇張的空間。

至於您的其他問題，你會想看看幾個選項：

元字符集字符。你應該可以使用unicode 8;如果您尚未添加以下內容到頁面的標題中！ <meta charset="utf-8">
替補的角色了特殊的HTML實體（不推薦，相當低效的。http://art-hanoi.com/vncode/

來源

2016-10-30 05:52:34 Matty

使用margin屬性的列表中設置元素之間的間距。

來源

2016-10-30 06:01:51

在HTML和CSS中顯示相鄰列表

回答

相關問題