Как разместить изображения (с текстом под ним) в одной строке?

Question

Как я могу разместить 11 изображений (с текстом под каждым) в одной строке? Вот несколько упрощенный вариант моего существующего кода:

.a { 
 
    height: 90px; 
 
    width: 90px; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    
 
    -webkit-animation-direction: normal; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count: 1s; 
 
    -webkit-animation-name: blink; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    
 
-moz-animation-direction: normal; 
 
    -moz-animation-duration: 2s; 
 
    -moz-animation-iteration-count: 1s; 
 
    -moz-animation-name: blink; 
 
    -moz-animation-timing-function: ease-in-out; 
 
} 
 

 
.b { 
 
    display: block; 
 
}

<div id="group-10" class="col-md-12"> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
    <img class="a" src="img/...png"><span class="b">A</span> 
 
</div>

Answer 1

Оберните элементы и установить оболочку быть inline-block.

.ab { 
 
    display: inline-block; 
 
} 
 
.a { 
 
    height: 90px; 
 
    width: 90px; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 

 
    -webkit-animation-direction: normal; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count: 1s; 
 
    -webkit-animation-name: blink; 
 
    -webkit-animation-timing-function: ease-in-out; 
 

 
-moz-animation-direction: normal; 
 
    -moz-animation-duration: 2s; 
 
    -moz-animation-iteration-count: 1s; 
 
    -moz-animation-name: blink; 
 
    -moz-animation-timing-function: ease-in-out; 
 
} 
 

 
.b { 
 
    display: block; 
 
}

<div id="group-10" class="col-md-12"> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
    <div class="ab"> 
 
     <img class="a" src="img/...png"/><span class="b">A</span> 
 
    </div> 
 
</div>

Answer 2

Дайте этому попытку: -

.col-md-12 { 
    width: 100%; 
    display: block; 
} 

img { 
    float: left; 
    height: 90px; 
    width: 90px; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 

    -webkit-animation-direction: normal; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1s; 
    -webkit-animation-name: blink; 
    -webkit-animation-timing-function: ease-in-out; 

-moz-animation-direction: normal; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: 1s; 
    -moz-animation-name: blink; 
    -moz-animation-timing-function: ease-in-out; 
} 

span { 
    float: left; 
} 

Ваши имена классов вызывают проблемы 1 и 2. Я бы посоветовал использовать другое имя класса для img и span.

Answer 3

имена классов @StillMoJo не может начинаться с цифры, добавить письмо перед ними, как A1, B2, и т.д .. Кроме того, исправить widht по ширине