Редактор Онлайн

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:80px;
background-color:#dddddd;
}
</style>
<link rel="stylesheet" type="text/css" href="https://setmar.ru/imgs/css/style.css">

</head>

<body>
<ul>
<li><a href="#home">Домой</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О сайте</a></li>
</ul>

<p><b>Замечание:</b> Если !DOCTYPE не указан, плавающие пункты списка могут привести к неожиданным результатам.</p><noindex>
<div class="zoomadssit">
<a onclick="this.href='https://partners.tbank.ru/click/fd68305d-4955-4d0e-9891-1813c528fffa'" href="https://tbank.ru" target="_blank">
<img src="https://setmar.ru/imgs/banner_tbank/640x180_tbank_4.png" class="zoomadssit"></a>
</div>
</noindex>

<p>Цвет фона добавляется к ссылкам, чтобы показать область ссылки. Кликать можно по всей этой области, а не только по тексту.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>
</html>

Ваш Результат:

Отредактируйте код сверху и кликните кнопку, чтобы посмотреть результат.

Уроки CSS - Попробуйте сами