Горизонтальный центр 'ul' в 'div' с максимальной шириной БЕЗ центрирования 'li только с использованием CSS

Question

Мы используем max-width на нашем ul, чтобы ограничить количество отображаемых литий на одной строке до 5. ul всегда должен быть в центре нашего div, следовательно margin:0 auto.

Это хорошо работает на экранах> = max-width. Как мы можем получить наш ul в нашем div на экранах менее max-width БЕЗ центрирования наших ли?

Вот наш HTML:

<div id="wrapper-team"> 
    <ul id="liste-team"> 
     <li>....</li> 
     <li>....</li> 
     <li>....</li> 
     <li>....</li> 
     <li>....</li> 
     <li>....</li> 
     <li>....</li> 
    </ul> 
</div> 

А вот наш CSS:

#wrapper-team{width:100%; margin:0 auto;} 
ul#liste-team{display:block; max-width:1432px; margin:0 auto; padding-top:5px;} 
ul#liste-team li{display:inline-block; width:280px; height:280px; list-style-type:none; margin:0 3px 5px 0;} 

Заранее большое спасибо за любую помощь!

Answer 1

Попробуйте добавить min-width Недвижимость.

ul#liste-team{display:block; min-width: 980px; max-width:1432px; margin:0 auto; padding-top:5px;} 

Answer 2

Создайте медиа-запрос для разрешения рабочего стола или другого минимального разрешения.

@media screen and (min-width: 600px) 
{ 
#wrapper-team{width:100%; margin:0 auto;} 
ul#liste-team{display:block; max-width:1432px; margin:0 auto; padding-top:5px;} 
ul#liste-team li{display:inline-block; width:280px; height:280px; list-style-type:none;  
margin:0 3px 5px 0;} 
}