如何在單個行中保留多個圖像？

Question

我想保留一行圖像。我使用引導程序和圖像也包括響應式類。

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

您可以使用display或浮點數代碼爲此。

實施例：

li{ 
    display:inline-block; 
} 

OR

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; 
    }