Question

justify（或-moz-box-pack）的box-pack属性似乎在Firefox中被忽略。

来自我们网站的

Live example。每行中的数字应该是右对齐的，它们在Chrome中。

任何线索？

HTML＆amp; CSS：

<a class="category_box box_sizing" href="/itunes-store/apps/free-apps/category/all-apps?itunes-store-id=888-36" itunes_id="888-36" path="/36/888-36">
            <div class="name">All Apps</div> <div class="num_apps">43</div>
        </a>


.page_list .list a {
    color: #5C5C5C;
}
.page_list .category_box {
    -moz-box-pack: justify;
    border-bottom: 1px solid #CCCCCC;
    display: -moz-box;
    padding: 15px 10px;
    width: 100%;
}
.box_sizing {
    -moz-box-sizing: border-box;
}
a {
    color: #5E87B0;
    text-decoration: none;
}

Answer 1

使用以下css规则：

.category_box .name {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

应该产生你想要的结果。

检查flexbox布局模式信息，这应该可以帮助您构建所需的内容：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://demo.agektmr.com/flexbox/

希望有所帮助

Firefox中的box-pack（-moz-box-pack）忽略了对齐属性

1 个答案: