How to keep multiple image in a single row? - html

Question

I am trying to keep some image in a single row. I am using bootstrap and image also including responsive class.
After 12 image new row has create for the rest of the image. But I want all image keep in a single row.
I have my code in this format
<ul class="people">
<li><a><img ></a>
<li><a><img ></a>
</ul>
Any kind of help will be appreciated. Thanks

Answer 1

After 12 image new row has create for the rest of the image. But I
want all image keep in a single row.
These images stays in a single row no matter how many.
.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 2

The simplest way in twitter-bootstrap is the class row whit div
<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>
Or If you need the image in <ul class="list-inline"> you need an inline block style
or for img
img {
border: 0 none;
display: inline-block;
height: auto;
max-width: 100%;
vertical-align: middle;
}

Answer 3

Please take a look at this Plunker.
HTML code:
<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 code:
img{
width: 50px;
height: 50px;
}
li{
display: inline-block;
list-style-type: none;
}
Hope this is what you asked for :)

Answer 4

Try this :
li{
display: inline-block;
}

Answer 5

You may use display or float code for this.
Example:
li{
display:inline-block;
}
OR
li{
float:left;
}
But its better to use display code. because if you want to use float code, then you need to add a clear code after finish floating..
Example:
<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
}
So... I think its better to use display:inline-block

Answer 6

You can use
li
{
display:inline-block;
}
After 12 image new row has create for the rest of the image
li:nth-child(12n)
{
clear:both;
}