Question

我正在尝试创建一个应该生成anchor和button标记的类，只要我在课程中分配它们就会显示相同的内容，

我正在使用flexbox为我处理媒体对象：

.media {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 1em;
 }
.media--center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.media__fig {}
.media__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
}

问题是，它看起来并不相同，也没有对齐。这是一个小提琴：http://jsfiddle.net/WTf9e/1/

Answer 1

所以，有一些事情：

（1）您的测试用例中的display: inline-block无效，因为它被稍后出现的display:flex取代，并适用于具有相同特异性的相同元素。这就是<a>元素最终成为页面宽度的原因 - 它的display:flex使其成为块级，这意味着它的自动宽度会拉伸以填充可用空间。如果您希望元素为内联级别，则应使用display:inline-flex而不是flex。（并删除inline-block样式，因为它被覆盖了无处不在）

（2）您直接在display:flex上设置<button>（通过将＆＃34;媒体＆＃34;类分配给它），以及doesn't work in Firefox - - 按钮仅对其display值做出反应，以尊重它们是否为内联级别与块级别。（正如该错误页面所述，Chrome在<table>和<fieldset>等其他特殊元素上的行为类似，但它确实接受{{1}上的自定义＆＃39;样式化出于某种原因。在任何情况下，Firefox都没有。）为了解决这个问题，你需要在<button>的内的wrapper-div 上设置display:flex，而不是在<button>本身。（或者，除了<button>本身）

（3）您可能需要<button>内的wrapper-div具有100％的高度和100％的宽度，否则它将获得按钮自动执行的一些自动居中维度行为对他们的孩子（并且没有通过CSS暴露）。也许你不需要这个，但我想这会在<button>和<a>之间产生差异。

使用flexbox垂直对齐按钮内的文本

1 个答案: