Блог

Главная - Вопросы по программированию - Могу ли я выровнять эти круги неупорядоченного списка с помощью html с помощью хитростей?

Могу ли я выровнять эти круги неупорядоченного списка с помощью html с помощью хитростей?

#html #css

#HTML #css

Вопрос:

Меня попросили сделать их копию только с помощью 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>

Но круги неупорядоченного списка не выравниваются. Могу ли я сделать это любым другим методом?

Ответ №1:

Вот вы где! Вы можете использовать этот код:

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