强制按钮元素布局像div
我想用按钮元素来替换div元素,以提高可访问性,但我需要按钮来布局像divs用来做。 (注意这只需要在webkit中工作)强制按钮元素布局像div
div取父容器的宽度,而按钮仅占用显示其内容所需的位置。
我该如何改变这种情况?
我不想设置类似width:100%的东西,因为如果您在容器中使用多于一个按钮并显示:webkit-box div很好地布局以使用剩余空间。
这里是一个小例如:
<!DOCTYPE html>
<html>
<head>
<title>button test</title>
<style>
.mybutton{
display: block;
border: 1px solid red;
-webkit-appearance: none;
-webkit-border-radius: 6px;
background-color: transparent;
-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
text-align: center;
}
</style>
</head>
<body>
<div class="mybutton">Div Button</div>
<button class="mybutton">Button</button>
</body>
</html>
如果您的按钮与“显示:-webkit-箱”的容器,然后只需添加“-webkit-箱-flex:1“到该容器内的按钮(或任何元素)。这解决了它。
也许你应该去更具体。尝试button.mybutton {
在您的CSS ...
样式应用得很好。所以匹配更具体不会改变任何东西。无论如何感谢:) –
我不知道为什么你有你的-webkit
规则后向斜线。删除它们,它们的行为与div相同,但某些需要重新设置的继承样式除外。
你可以看到按钮和输入与WebKit的盒子在这里很好打的一个例子: http://jsfiddle.net/dt592/
与周围div设置显示:-webkit-box。它工作正常,没有它,虽然他们呈现不同。我不能添加周围的div。 –
-webkit-box已添加到父容器中,而不是添加到灵活的元素中,请参阅http://www.html5rocks.com/en/tutorials/flexbox/quick/ – Duopixel
是的,我知道,但在我的情况下,我可以't不改变父母的显示 –
我不能添加容器。我需要按钮在我的小示例中布局相同,而不更改dom结构 –
似乎不改变DOM来添加外部容器是不可能的。一直在修补它。按钮元素会缩小以适应其内容,除非它给出了明确的维度。 –