Как получить элемент после моей горизонтальной панели навигации CSS, чтобы появиться под ним? - PullRequest
Новая
       3

Как получить элемент после моей горизонтальной панели навигации CSS, чтобы появиться под ним?

0 голосов
/ 16 июня 2010

Я использую неупорядоченный список CSS для создания панели навигации сайта, используя display: inline, display: block и float: left.Следующий элемент, который я помещаю после панели навигации, расположен справа от нее.Как настроить следующий элемент так, чтобы он отображался ниже?

HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
  </head>

  <body>
    <div>
      <ul class="nav">
        <li class="nav"><a class="nav" href="#">One1</a></li>
        <li class="nav"><a class="nav" href="#">Two</a></li>
        <li class="nav"><a class="nav" href="#">Three</a></li>
        <li class="nav"><a class="nav" href="#">Four</a></li>
      </ul>
    </div>

    <div><h2>Heading</h2></div>
  </body>
</html>

CSS: 

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  display: block;
  float: left;
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}

Ответы [ 2 ]

2 голосов
/ 16 июня 2010

Попробуйте использовать clear: left; в div после вашего списка.Это должно затем очистить элемент, который появится под вашим неупорядоченным списком.

Редактировать: на самом деле должно читаться clear: left;, хотя использование clear: both; также будет работать

0 голосов
/ 17 июня 2010

Используйте очистку с плавающей точкой, а затем задайте размер и поместите под ним заголовок. Если вы зададите ширину, превышающую расстояние справа от навигационной панели, она должна автоматически выпасть.

CSS: 

.clear { clear:both; }
#heading { position:relative; margin:0px auto; width:980px; }

HTML после навигации: 

<div class="clear"></div>    
<div id="heading">Heading</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...