Как сохранить несколько изображений в одной строке?

Question

Я пытаюсь сохранить некоторое изображение в одной строке. Я использую bootstrap и изображение, в том числе отзывчивый класс.

После 12 изображений новая строка создала для остальной части изображения. Но я хочу, чтобы все изображения сохранялись в одной строке.

У меня есть код в этом формате

<ul class="people"> 
    <li><a><img ></a> 
    <li><a><img ></a> 
</ul> 

будет оценен любой вид помощи. Благодаря

Answer 1

Самый простой способ в твиттер-бутстрапу класс row йоту ДИВ

<div class="row"> 

     <div><a><img src='your_img_1' ></a></div> 
     <div><a><img src='your_img_2'></a></div> 
     <div><a><img src='your_img_3'></a></div> 
    </div> 

Или Если вам нужно изображение в <ul class="list-inline"> вам нужен блок стиль инлайн или IMG

img { 
    border: 0 none; 
    display: inline-block; 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
} 

Answer 2

Пожалуйста, взгляните на это Plunker.

HTML код:

<ul class="people"> 
    <li> 
    <a><img src="http://blue-engineering.nl/wp-content/uploads/2014/10/Slider-blue.png"></a> 
    </li> 
    <li> 
    <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png"></a> 
    </li> 
</ul> 

код CSS:

img{ 
    width: 50px; 
    height: 50px; 
} 

li{ 
    display: inline-block; 
    list-style-type: none; 
} 

Надежда это то, что вы просили :)

Answer 3

Попробуйте это:

li{ 
    display: inline-block; 
} 

Answer 4

Вы можете использовать дисплей или float код для этого.

Пример:

li{ 
    display:inline-block; 
} 

ИЛИ

li{ 
    float:left; 
} 

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

Пример:

<ul class="people"> 
    <li><a><img ></a> 
    <li><a><img ></a> 
</ul> 
<div class="people2"> 
your stuff... here 
</div> 

CSS

li{ 
    float:left; 
} 
.people2 { 
    clear:both 
} 

Итак ... Я думаю, что его лучше использовать дисплея: встроенный блок

Answer 5

После 12 изображений новой строки создать для остальные изображение. Но я хочу, чтобы все изображение хранилось в одной строке.

Эти изображения остаются в одной строке независимо от того, сколько.

.people li { 
 
    display: inline; 
 
    white-space: nowrap 
 
}

<ul class="people"> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a> 
 
</ul>

Answer 6

Вы можете использовать

li 
    { 
    display:inline-block; 
    } 

После 12 изображений новой строки создать для остальной части изображения

li:nth-child(12n) 
    { 
    clear:both; 
    }