html - 在 HTML 和 CSS 中显示相邻列表

Question

我想在他们的网页上显示餐厅的菜单。我正在尝试制作 2 个相邻列表。我已经成功地做到了，但是每个列表项之间有很大的空间。此外，网页中单词的重音显示不正确。有什么想法吗？这是我的代码:

#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. 元字符集字符。你应该可以使用 unicode 8；如果您还没有将以下内容添加到页面的标题中! <meta charset="utf-8">

2. 将字符替换为特殊的 HTML 实体(不推荐，效率很低。http://art-hanoi.com/vncode/