Меню UL/LI CSS не правильно выравнивается

У меня возникают проблемы с выравниванием меню. Изображения все расположены далеко друг от друга, даже когда они должны быть ближе. Я новичок в использовании Ul и Li и не знаю, как это исправить. В идеале у меня были бы изображения по всему экрану без пробела справа или слева и просто тонкое пространство между каждым изображением, но вместо этого есть большое пространство. Я не уверен, что это что-то в тегах Ul Li или что-то, что я могу сделать с маржей.Меню UL/LI CSS не правильно выравнивается

Может кто-нибудь, пожалуйста, посоветуйте мне. Я включаю jsfiddle, чтобы показать, как он выглядит в настоящее время. https://jsfiddle.net/f1bctqzn/ - это то, что я сейчас получаю. Как эти строки касаются их соответствующих сторон экрана и все еще имеют небольшое пространство между остальными.

<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li> 
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li>

источник

2016-08-16 P. Burden

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

Да, они должны быть серыми ящиками, на данный момент я просто пытаюсь их правильно установить на данный момент. Есть ли способ поместить маржу по-другому? Я также попытался изменить значение поля и не видел изменения в результате. –

Добавить padding: 0 в свой ul и margin: 1px (или что-то), чтобы li Кроме того, добавьте width: 100% к img

источник

2016-08-16 02:49:30

вместо максимальной ширины? или дополнительно? –

не имеет значения, если у вас есть ширина: 100% :) –

ну теперь он отображается как одна сплошная линия –

См this fiddle

Чтобы добавить пространство betwwen в li элементов, не добавляйте margin собственность на ul, но добавьте маржу к li предметам (я использовал 2px, который вы установили для ul). Для того, чтобы добавить запас только между li элементами, я использовал

li.header{ 
    margin-left:2px; 
} 
li.header:first-child{ 
    margin-left: 0; 
}

источник

2016-08-16 02:57:04

Скорректированной полей и использовал flexbox для настройки изображения по всему экрану.

Отметьте и сообщите мне ваши отзывы. Благодаря!

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul.toplist { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
li.header { 
 
    display: inline-block; 
 
    height: 100%; 
 
    margin-right: 1px; 
 
} 
 
img.kale-grain-bowls, 
 
img.salads, 
 
img.burgers-sandwiches, 
 
img.sides, 
 
img.smoothies-milkshakes, 
 
img.kids-real-meals { 
 
    max-width: 100%; 
 
    max-height: 100px; 
 
}

<ul class="toplist"> 
 
    <li class="header"> 
 
    <a href="/menu/kale-grain-bowls"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="kale-grain-bowls"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/salads"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="salads"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/burgers-sandwiches"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="burgers-sandwiches"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/sides"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="sides"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/smoothies-shakes"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="smoothies-milkshakes"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/kids-real-meals"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="kids-real-meals"> 
 
    </a> 
 
    </li> 
 
</ul>

источник

2016-08-16 02:58:50 kukkuz

Меню UL/LI CSS не правильно выравнивается

ответ

Смежные вопросы