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了。

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

Answer 1

解决了它：

在我的@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
}

Answer 2

在媒体查询的 .icon 类更改display:block;为的 css 中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
}