将窗口大小调整为480px或更小时，图标不显示为内联

Question

以下是CSS代码的一部分：

body {
width: 80%;
margin:0 auto;
}

.icons {
float:right;
width:5.2173913%;
height:60px;
margin:0 0.43478261%;
opacity:.5;
-webkit-transition:opacity .1s ease-out;
-moz-transition:opacity .1s ease-out;
-ms-transition:opacity .1s ease-out;
-o-transition:opacity .1s ease-out;
transition:opacity .1s ease-out
}

#title {
display:block;
background:url(title.jpg) no-repeat;
width:32.782609%;
height:95px;
margin:0.86956522% auto;
-webkit-transition:all .25s ease-out;
-moz-transition:all .25s ease-out;
-ms-transition:all .25s ease-out;
-o-transition:all .25s ease-out;
transition:all .25s ease-out
}

Heres是第一部分的样子：

当我尝试添加我的`@media类：

时

@media screen and(max-width: 480px){
    #title {
    display:block;
    background:url(title_s.jpg) no-repeat;
    width:100%;
    height:95px;
    margin:0.86956522% auto;
    -webkit-transition:all .25s ease-out;
    -moz-transition:all .25s ease-out;
    -ms-transition:all .25s ease-out;
    -o-transition:all .25s ease-out;
    transition:all .25s ease-out
    }

    .icons {
    display: block;
    float: none;
    width: 100%;
    height:60px;
    margin:0 5px;
    opacity:.5;
    -webkit-transition:opacity .1s ease-out;
    -moz-transition:opacity .1s ease-out;
    -ms-transition:opacity .1s ease-out;
    -o-transition:opacity .1s ease-out;
    transition:opacity .1s ease-out
    }
}

它看起来像这样：

我不明白为什么这些图标不会显示为inline。我也试过了display:inline-block。

这是小提琴：http://jsfiddle.net/Nilzone/2bfhp/

Answer 1

在.icon类的媒体查询css中将display:block;更改为display:inline;，您可能也想从那里删除宽度规则

.icons {
display: inline;
float: none;
height:60px;
margin:0 5px;
opacity:.5;
-webkit-transition:opacity .1s ease-out;
-moz-transition:opacity .1s ease-out;
-ms-transition:opacity .1s ease-out;
-o-transition:opacity .1s ease-out;
transition:opacity .1s ease-out
}

Answer 2

解决了它：

在我@media screen and(max-width: 480px){下的.icons下，我必须将更改display:block更改为display:inline-block，并将宽度设置为px中的原始大小。

所以我的.icons课程看起来像这样：

.icons {
display: inline-block;
float: none;
width: 60px;
height:60px;
margin:0 5px;
opacity:.5;
-webkit-transition:opacity .1s ease-out;
-moz-transition:opacity .1s ease-out;
-ms-transition:opacity .1s ease-out;
-o-transition:opacity .1s ease-out;
transition:opacity .1s ease-out
}