时间戳

首页 > 解决方案 > 我可以通过技巧将那些无序列表的圆圈与 html 对齐吗？

html - 我可以通过技巧将那些无序列表的圆圈与 html 对齐吗？

问题描述

我被要求只用 html 制作这些副本： 任务照片

我尝试使用以下代码来做到这一点：

<!DOCTYPE html>
<html>

<head>
  <title>
    Table-2
  </title>
</head>

<body>
  <table width="20%" border="1" cellspacing="0">
    <tr>
      <td>
        <p>Webpage</p>
      </td>
    </tr>
    <tr>
      <td>
        <p align="center">
          <b><u>Ordered and Unordered list</u></b>
        </p>
        <p>
          <ul align="right" type="circle">
            <li>NDC</li>
            <li>DC</li>
            <li>DCC</li>
        </p>
        </ul>
        </p>
        <p>
          <ol align="left" tyle="1" start="7">
            <li>NDC</li>
            <li> DC</li>
            <li>DCC</li>
          </ol>
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

但是无序列表的圆圈没有对齐。我可以使用任何其他方法吗？

标签： htmlcss

解决方案

给你！您可以使用以下代码：

<!DOCTYPE html>
<html>
    <head>
    <title>
    Table-2
    </title>
    </head>
    <body>
    
    <table width="20%" border="1" cellspacing="0"><tr><td>
    <p>Webpage</p>
    
    </td>
    </tr>
    <tr><td>
    
    <p align="center"><b><u>Ordered and Unordered list</u></b></p>
    <ul type="circle" style="margin-left: 65%;">
    <li>NDC</li>
    <li>DC</li>
    <li>DCC</li></p>
    </ul>
    <p><ol style="margin-left: 20%;" type="1" start="7">
    <li>NDC</li>
    <li> DC</li>
    <li>DCC</li>
    </ol></p>
    </table>
    </body>
    </html>

您需要做的就是使用该margin-left物业。

如果你想让你的代码更正式一点，你可以这样做：

创建一个名为 style.css 的文件，并在其中添加以下代码：

ul[type="circle"] {
    margin-left: 65%;
}

ol[type="1"] {
    margin-left: 20%;
}

然后，返回到您的 HTML，并添加以下内容：

<!DOCTYPE html>
<html>
    <head>
        <title>Table-2</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    <table width="20%" border="1" cellspacing="0"><tr><td>
    <p>Webpage</p>
    
    </td>
    </tr>
    <tr><td>
    
    <p align="center"><b><u>Ordered and Unordered list</u></b></p>
    <ul type="circle">
    <li>NDC</li>
    <li>DC</li>
    <li>DCC</li></p>
    </ul>
    <p><ol type="1" start="7">
    <li>NDC</li>
    <li> DC</li>
    <li>DCC</li>
    </ol></p>
    </table>
    </body>
    </html>

推荐阅读