Отступы в HTML

Я пытаюсь сделать веб-страницу, и я наткнулся на список проблем, отступов.Отступы в HTML

Вот пример того, что я пытаюсь сделать:

Final product

но я не могу достаточно выяснить, как отступа пронумерованный список. Используя мой код, это то, что он выглядит как

What My image looks like

<html> 
<head> 
    <title>Top Five Cat & Dog Names</title> 
</head> 
<body> 
    <h1>Top Five Cat & Dog Names</h1> 
    <h2>Top Five Cat Names</h2> 
    <ul> 
     <li>Female Cats</li> 
    </ul> 
     <ol> 
      <li>Tigger</li> 
      <li>Tiger</li> 
      <li>Smokey</li> 
      <li>Kitty</li> 
      <li>Sassy</li> 
     </ol> 
    <ul> 
</body>

код продолжается, но мне нужно, чтобы получить этот вопрос решен первым

Спасибо за любую помощь! =)

источник

2015-04-06 airsickbachus3

Правильный способ сделать это, поверить в это или нет, на самом деле положить упорядоченный список внутри «Женских кошек» <li>. Это самый семантический способ добиться этого, поскольку он сообщает браузерам и веб-искателям (например, Google), что второй список на самом деле является дочерним элементом родительского списка. Это важно для индексации поиска, среди прочего.

Вот как вы должны это делать. Если вы хотите получить дополнительное вертикальное пространство между списками, поиграйте с CSS упорядоченного списка.

<h1>Top Five Cat &amp; Dog Names</h1> 
 
<h2>Top Five Cat Names</h2> 
 
<ul> 
 
    <li>Female Cats 
 
     <ol> 
 
      <li>Tigger</li> 
 
      <li>Tiger</li> 
 
      <li>Smokey</li> 
 
      <li>Kitty</li> 
 
      <li>Sassy</li> 
 
     </ol> 
 
    </li> 
 
    <li>Male Cats 
 
     <ol> 
 
      <li>Figaro</li> 
 
      <li>Tom</li> 
 
      <li>Ahkmenrah</li> 
 
     </ol> 
 
    </li> 
 
</ul>

источник

2015-04-06 03:20:48 Nathanael

Вы можете дать <ol> левый край:

ol { 
 
    margin-left:40px; 
 
}

<h1>Top Five Cat & Dog Names</h1> 
 

 
<h2>Top Five Cat Names</h2> 
 

 
<ul> 
 
    <li>Female Cats</li> 
 
</ul> 
 
<ol> 
 
    <li>Tigger</li> 
 
    <li>Tiger</li> 
 
    <li>Smokey</li> 
 
    <li>Kitty</li> 
 
    <li>Sassy</li> 
 
</ol> 
 
<ul>

источник

2015-04-06 03:13:35 j08691

В вашем CSS установить

ol{ 
    margin-left: 
}

все, что вы хотите

источник

2015-04-06 03:13:38 sinanspd

Отступы в HTML

ответ

Смежные вопросы