css - 将窗口大小调整为 480 像素或更小时，图标未显示为内联

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
}

这是第一部分的样子:

当我尝试添加我的`@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 。

这是 fiddle :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
}