如何将图像(下面有文本)放置在一行上？

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等。同时，将宽度更正为宽度。