Блог

Допустим, у меня есть следующий список в html:

 <ul>
   <li>Program</li>
   <li>Platser</li>
   <li>System</li>
</ul>
  

Которое оформлено следующим образом:

 li
{       
   float: left;
   padding: 10px;
}
  

Это выглядит примерно так:

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

Тем не менее, желаемое поведение, которое я ищу, было бы таким:

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

Вам нужно изучить медиа-запросы CSS3 / адаптивный веб-дизайн. Тонны результатов в Google и на SO, но вот один.

 @media screen and (max-width: 200px) {
// do something here, change the behavior of your list
}
  

Вы могли бы использовать медиа-запросы CSS3, чтобы удалить значение с плавающей точкой: слева, когда ширина экрана достаточно мала.

https://developer.mozilla.org/en/CSS/Media_queries

вы можете установить атрибут width или min-width в CSS для элемента ul, чтобы предотвратить его обрезку при изменении размера страницы

Используйте медиа-запрос CSS3 и укажите разные правила CSS для разной ширины окна браузера.