在 HTML 中使用嵌套 <ul> 和 <ol> 时，我遇到了行距问题

Question

我在大学作业中使用的是非常基本的 HTML，我不得不使用嵌套 <ul> and <ol>. 一切正常，但只是行间距有问题 - 正如您在图像，<ul> 中的第一个 <li> 项目没有像其他元素一样留下一行，这破坏了我的格式。

有没有不用 CSS 或者只用 1-2 行就可以解决这个问题的方法。

代码：

<!DOCTYPE html>
<html>
<head>      
<title>GEC Modasa </title>
</head> 
 <body>
 <ol>
 <li><b>COMPUTER ENGINEERING</b>
 <ol type = "a">
     <li>WEB DEVELOPMENT</li>
     <li>SOFTWARE ENGINEERING</li>
     <li>ADVANCED JAVA</li>
 </ol>
</li>      
     
 <li><b>INFORMATION TECHNOLOGY</b>
 <ol type = "I">
     <li>DISTRIBUTED OS</li>
     <li>IMAGE PROCESSING</li>
     <li>.NET</li>  
 </ol> </li> 

<li><b>CIVIL ENGINEERING</b>
<ul type="square">
    <li> APPLIED FLUID MECHANICS</li>
    <li>WATER & WATERWASTE ENGINEERING</li>
 </ul> </li> 
 
</ol>
   </body>
</html>

输出：

Output

已解决。只是我的浏览器有问题

Answer 1

我希望将代码放到 Live 中以实际方式检查它，但您可以通过这种方式定位任何 ul 或 ol 的第一个 child :

ul li:first-child {
margin-top:5px // margin-top
 }


ol li:first-child {
margin-top:5px // margin-top
 }

ul {
line-height:1.8; // more spacing will be more line height 
}

Answer 2

我已经复制了你的代码并运行它，一切看起来都很好/没有错误。可能我建议您必须在不同的浏览器中重新运行您的 html 代码，可能我建议 google chrome。如果你想制作一行 space 你可以使用 break 语句，
或 .

在 HTML 中使用嵌套 <ul> 和 <ol> 时，我遇到了行距问题

While using nested <ul> and <ol> in HTML, I am facing problem with the line spacing

html

css

tags

html-lists