Элементы списка работают вне списка и области div

Question

У меня проблема с неупорядоченным списком меню. При этом элементы списка пересекают границы <ul> и <div> и начинают следующую строку только после того, как она достигает края экрана.

Вот сайт: http://finalonline.co.uk/mypics/gallery/categories/

Answer 1

Do display: block; всегда ... никогда не делай display: inline; или display: inline-block;

Чтобы исправить неупорядоченный список из разлива DIV, попробуйте зайти в CSS и применить это:

ul {
list-style-position: inside;
}

Answer 2

Вы можете использовать float: left; на li с вместо display: inline;.

Просто не забудьте также использовать overflow: hidden; на родительском элементе (ul).

Другой вариант будет использовать: display: inline-block, но я не уверен на 100% в поддержке браузера .

Answer 3

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

так, например, если ваш родитель имеет ширину: 600px,внутри этого div, класса и установить min-width: 600px, и это не позволит

элементам накладываться друг на друга и выплескиваться за пределы родителя.работал для меня.

Answer 4

Сделайте их display: block, а не inline.