媒体查询、内联块和文本对齐对齐答案

【问题标题】：Media queries, inline blocks and text-align justify媒体查询、内联块和文本对齐对齐
【发布时间】：2013-12-24 11:45:51
【问题描述】：

我在使用内联块对齐元素时遇到问题当我只是使用"text-align: justify"的技术时，这一切都很正常@

但是当我把所有的都放在媒体查询中时，什么都没有发生

（元素不对齐宽度text-align: justify）

这就是小提琴应该是这样的

ul {
    text-align: justify;
    width: 100%;
}

ul:after {
    content: " ";
    display: inline-block;
    width: 100%;
    background: #000;
    height: 10px
}

ul > li {
    display: inline-block
}

http://jsfiddle.net/2t6vm/

还有我的问题的示例宽度（尝试调整结果框架的大小）

@media only screen and(max-width: 479px) {
     same css
 }

http://jsfiddle.net/FYLQq/

【问题讨论】：

尝试将 !important 放在您的媒体查询中。
@Enijar 这不是一个理想的解决方案 - !important 应尽可能避免，这是不好的做法，会降低可访问性和可维护性。原因如下：stackoverflow.com/a/3706876/1542891
好点，但是当它是星期五：i.imgur.com/vOo8MfG.jpg
我应该把 !important 放在哪里？

标签： html css responsive-design media-queries

【解决方案1】：

检查它在媒体查询中的工作情况。

Updated Fiddle

@media only screen and (max-width : 479px) {

    ul {
        text-align: justify;
        border:solid 1px white;
        width: 100%;
    }

    ul:after {
        content: " ";
        display: inline-block;
        width: 100%;
        background: #000;
        height: 10px
    }

    ul > li {
        display: inline-block
    }

}

【讨论】：