html - 如何根据元素变化数定义不同的css

Question

我希望 Button 元素占据容器的 100%，而不是容器中的 1、2 或 3。

这是 fiddle 链接:Js Fiddle Link

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button><button class="false" data-value="2"><div class="sign"></div></button><button class="notapplicable selected" data-value="3"><div class="sign"></div></button></div>

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button><button class="false" data-value="2"><div class="sign"></div></button></div>

<div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-value="1"><div class="sign"></div></button></div>

Answer 1

您可以通过脚本实现这一点，或者您可以轻松地使用 display:flex 使所有按钮适合容器:

所以你的 CSS 将是:

.inputFieldBoolean.buttonSeries {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.inputFieldBoolean.buttonSeries button {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 42px;
    border: 1px solid #cdd6e9;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #e6eef2));
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -o-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: -ms-linear-gradient(top, #fcfcfc 0%, #e6eef2 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #e6eef2 100%);
}

您可以查看更新后的 jsFiddle here .

有关 flexbox 的更多信息，请访问 MDN。 .

通常，大多数浏览器版本都支持它，Internet Explorer 9 及以下版本除外。我还添加了前缀以确保最大的兼容性。

See also the CanIUse page用于 flexbox。