html - 媒体查询、内联 block 和文本对齐对齐

标签 html css responsive-design media-queries

我在使用内联 block 对齐元素时遇到问题 当我只是使用 "text-align: justify"

技术时一切正常

但是当我将所有内容都放入媒体查询中时,什么也没有发生

(元素不对齐宽度 text-align: justify)

fiddle 应该是这样的

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/

最佳答案

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

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
    }

}

关于html - 媒体查询、内联 block 和文本对齐对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20743774/

相关文章:

css - 为什么我的 Wordpress 主题在移动设备上丢失 CSS?

html - 以下哪项是使我的页面具有响应性的最佳方式?

css - 背景图像未缩放到手机。

css - 在 mvc 中使用图像作为页面的主题

jquery - Firefox Chrome 行高差异

html - 可折叠的打开/关闭 div 未关闭

html - 在整个页面上重复背景,而不仅仅是 View 区域

javascript - 更改具有相同类名的多个 div 的宽度的脚本

html - 需要帮助将我的 td 元素居中对齐

HTML & CSS : How I can make an image's bottom edge align with text?