Q

强制按钮元素布局像div

2011-12-01 62 views 3 likes

3

我想用按钮元素来替换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>

2011-12-01 Daniel Kurka

A

回答

3

如果您的按钮与“显示：-webkit-箱”的容器，然后只需添加“-webkit-箱-flex：1“到该容器内的按钮（或任何元素）。这解决了它。

http://jsfiddle.net/y53VT/

2011-12-01 16:53:28

+0

我不能添加容器。我需要按钮在我的小示例中布局相同，而不更改dom结构 –

+0

似乎不改变DOM来添加外部容器是不可能的。一直在修补它。按钮元素会缩小以适应其内容，除非它给出了明确的维度。 –

0

也许你应该去更具体。尝试button.mybutton {在您的CSS ...

2011-12-01 09:49:22 Michiel

+0

样式应用得很好。所以匹配更具体不会改变任何东西。无论如何感谢:) –

1

我不知道为什么你有你的-webkit规则后向斜线。删除它们，它们的行为与div相同，但某些需要重新设置的继承样式除外。

你可以看到按钮和输入与WebKit的盒子在这里很好打的一个例子： http://jsfiddle.net/dt592/

2011-12-01 16:02:41 Duopixel

+0

与周围div设置显示：-webkit-box。它工作正常，没有它，虽然他们呈现不同。我不能添加周围的div。 –

+0

-webkit-box已添加到父容器中，而不是添加到灵活的元素中，请参阅http://www.html5rocks.com/en/tutorials/flexbox/quick/ – Duopixel

+0

是的，我知道，但在我的情况下，我可以't不改变父母的显示 –

相关问题