Интервал между <li> в [дубликате]

Question

Интервал между <li> в [дубликате]

0

Поэтому я немного в тупике. Я пытаюсь сделать страницу для отображения изображений. Я хочу, чтобы было 5 изображений на строку с максимальным размером, когда окно имеет максимальную ширину (~ 950 px), но я хочу, чтобы они приблизились по мере того, как вы уменьшили его, а затем, когда между ними будет 0 px, будет только 4 изображения в строке, и это будет продолжаться до определенной ширины. Вроде как Instagram, но я не хочу, чтобы фотографии стали меньше. Вот что у меня есть:

HTML

<ul>
   <li>
      <img src="0.png">
   </li>
</ul>
<ul>
   <li>
      <img src="1.png">
   </li>
</ul>
<ul>
   <li>
      <img src="2.png">
   </li>
</ul>

CSS

ul
{
    padding: 0;
    margin: 0;
    list-style-type:  none;
}

ul li
{
    display: inline;
}

//the images are also float left, so they are horizontal

В принципе, как вы можете видеть, у меня ничего нет, и я действительно не знаю, что делать. Буду признателен за любую помощь. Благодарю!

Shahar 18 окт. 2013, в 22:11

Источник

1

Разве вы не можете указать min-width изображения <li> s?
Mr. Polywhirl 18 окт. 2013, в 20:07
0

Разрешены ли ответы с <таблицей>?
Jim W 18 окт. 2013, в 20:09
1

Нет Нет Нет AttoJimW Stackoverflow.Com/questions/83073 / ...
iambriansreed 18 окт. 2013, в 20:10
0

Удалите пробелы между элементами <li> .
Jon 18 окт. 2013, в 20:12
0

@iambriansreed Но изображения могут быть данными, это может быть таблица данных изображений, нет?
Jim W 18 окт. 2013, в 20:13
0

@ Mr.Polywhirl Нет, потому что я хочу, чтобы он был гибким. Я хочу, чтобы расстояние между этими двумя изображениями уменьшилось до 0, когда я уменьшу окно, но до того, как оно будет разделено.
Shahar 18 окт. 2013, в 20:14
0

@ JimW Очевидно, это не так.
iambriansreed 18 окт. 2013, в 20:18
0

@iambriansreed Извините, как это понятно?
Jim W 18 окт. 2013, в 20:24

Показать ещё 6 комментариев

Теги:

html

css

7 ответов

Ещё вопросы

Разве вы не можете указать min-width изображения <li> s?
Нет Нет Нет AttoJimW Stackoverflow.Com/questions/83073 / ...
Удалите пробелы между элементами <li> .
@iambriansreed Но изображения могут быть данными, это может быть таблица данных изображений, нет?
@ Mr.Polywhirl Нет, потому что я хочу, чтобы он был гибким. Я хочу, чтобы расстояние между этими двумя изображениями уменьшилось до 0, когда я уменьшу окно, но до того, как оно будет разделено.
@iambriansreed Извините, как это понятно?

Durnehviir · Answer 1 · 2013-10-18T22-41-00.000Z

Как говорили все остальные:

<ul>
 <li>Stuff</li>
  <li> Other Stuff</li>
  </ul>

Devin · Answer 2 · 2013-10-18T21-35-00.000Z

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

HC_ · Answer 3 · 2013-10-18T19-11-00.000Z

Можете ли вы сделать мне одолжение и попробовать это исправить (я знаю, что в HTML есть отвратительная ошибка невидимого промежутка, связанная с li написанная на новых строках в HTML, не уверен, что она применима к UL в порядке, но это стоит того)

<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>

Scott Rowell · Answer 4 · 2013-10-18T19-11-00.000Z

как это? http://jsfiddle.net/fqTsN/

удалите float:left от ваших снимков, кстати! Я тоже исправил это (горизонтально без float:left;

Colin Keany · Answer 5 · 2013-10-18T18-04-00.000Z

Ваш неупорядоченный список должен выглядеть так:

<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>

Супер нетрадиционный, но он работает.

Сценарий здесь: http://jsfiddle.net/QMs93/

Я этого не делал, человек, который редактировал мой пост. Я сделал так, как ты это написал.
О, хорошо, хорошо проверьте мой отредактированный ответ с скрипкой. Должно помочь!

Mr. Polywhirl · Answer 6 · 2013-10-18T17-53-00.000Z

http://jsfiddle.net/AgLMp/1

CSS

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 950px;
    min-width: 600px;
}

ul li {
    float: left;
    width: 33%;
    min-width: 200px;
}

HTML

<ul>
    <li>
        <img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
    </li>
</ul>

Кажется, он не делает то, что имеет на один столбец меньше, так как ширина сужается.
Вау, действительно близко. Хотя, если я сделаю его меньше, чтобы в каждом ряду было по 2 коробки, я хочу, чтобы они тоже были разложены. Ты знаешь как это сделать?
@ Mr.Polywhirl Нет, поэтому, когда я сделаю окно меньше, будет только 3 коробки. Но я хочу, чтобы они были полностью удалены друг от друга. То, что у вас было в первый раз, было хорошо, хотя, когда я сделал экран меньше, было бы 2 изображения, но я бы хотел, чтобы они были удалены друг от друга, как и первые 3.

ph33nyx · Answer 7 · 2013-10-18T17-22-00.000Z

это может приблизиться к тому, куда вы хотите отправиться:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
    padding: 0;
    margin: 0;
    list-style-type:  none;
    min-width:450px;
}
ul li {
    display: inline;
    float:left;
    width:20%;
}
</style>
</head>

<body>
<ul>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>

Это более "правильная" разметка, чтобы поместить все изображения в один список и открыть дверь для установки минимальной минимальной ширины на ul, но% на li... что делает пробелы различными в зависимости от размера окна. Я не уверен, что это доставит вас всю дорогу, но, надеюсь, это поможет!

Они накладываются друг на друга. Но мне нравится, как он растягивается, когда я расширяю страницу.