图标不显示为内联

这里是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 
}

继承人是第一部分的样子：

enter image description here

当我尝试加我的@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 
    } 
}

它看起来像这样：

enter image description here

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

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

来源

2013-07-11 Nilzone-

你能重现问题的小提琴？ http://jsfiddle.net。 @Orangepill已经涵盖了将图标更改为“display：block”的事实，这肯定不会使这些元素“内联”了。 –

@MatthewGreen http://jsfiddle.net/Nzonezone/2bfhp/在这里你去 –

解决它删除宽度规则：

在我的@media screen and(max-width: 480px){根据.icons，我不得不改变display:block为display:inline-block并将宽度设置为它的原始大小e在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 
}

来源

2013-07-12 12:32:47

在媒体查询的CSS .icon类变化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 
}

来源

2013-07-11 21:21:04 Orangepill

完全相同的结果 - 我以为我在原来的文章中写道。对于那个很抱歉。 –

如果在媒体查询行和媒体查询行之后添加空格，则会发生更改？ – Orangepill

如果我删除宽度 - 所有图标消失。 –

图标不显示为内联

回答

相关问题