HTMLとCSSで隣接するリストを表示する

Question

自分のウェブページにレストランのメニューを表示しようとしています。私は隣接する2つのリストを作ろうとしています。私は成功しましたが、各リスト項目の間には膨大なスペースがあります。また、単語のアクセントがWebページに正しく表示されません。何かご意見は？

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

Answer 1

それはあなたのリストにあなたが<br>タグを追加次のようになります。ここに私のコードです。私はこれらが必要だとは思わない。それらがなければ、私は線の間に誇張されたスペースを得ません。

あなたの他の質問については、オプションのカップルに見えることになるでしょう：

1. メタ文字セットの文字を。あなたはユニコード8を使用できるはずです。あなたのページの見出しに次の行を追加してください。 <meta charset="utf-8">

2. 特殊なHTMLエンティティ（推奨しませんし、むしろ非効率なため外の文字を代入します。http://art-hanoi.com/vncode/

Answer 2

要素間の間隔を設定するリストのマージンプロパティを使用します。