Я создал страницу, на которой я использую список для отображения элементов по горизонтали

Теперь я вижу результат на странице, здесь

Но когда я перетаскиваю и делаю окно браузера коротким, я получаю искаженный список, как в скррен-шоте здесь.

http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG

http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG

Я использую CSS в списке как: -

#navlist li
        {

            padding: 1em;
            float: left;
            list-style-type: none;
        }

В конце списка я использую очищающий div

#clear-both 
{
   clear: both;
}

Любая помощь

Благодарность

Прадют

[2]: [2]: http://pradyut.dyndns.org/WebApplicationSecurity/people_ss. JPG

1
Pradyut Bhattacharya 29 Мар 2010 в 02:39
Обновленная страница ... pradyut.dyndns.org/WebApplicationSecurity/people.jsp
 – 
Pradyut Bhattacharya
30 Мар 2010 в 01:49

3 ответа

Лучший ответ

Хорошо может решить проблему, используя минимальную высоту в другом div css

  #another 
  {
      padding: 5px;
      background-color: green;
      min-height: 75px;
  }

Благодарность...

0
Pradyut Bhattacharya 29 Мар 2010 в 02:52

Кажется, я не могу получить доступ к вашему сайту.

Попробуйте использовать display: inline вместо float: left

#navlist li
{
padding-right: 1em;
display: inline;
list-style-type: none;
}
1
laher 29 Мар 2010 в 02:43

Проблема заключается в разной высоте каждого элемента LI. Если вы зададите им общую высоту, макет будет правильно отображаться при изменении размера окна:

#navlist li
{
    height: 100px;
    padding: 1em;
    float: left;
    list-style-type: none;
}
1
Andy E 29 Мар 2010 в 02:48
Ну, другой вопрос ... как я могу выровнять имена по верхнему краю, чтобы они были на той же высоте, что и изображения
 – 
Pradyut Bhattacharya
29 Мар 2010 в 02:56