Question

我正在尝试用按钮元素替换div元素以提高可访问性，但我需要按钮来布局，就像过去使用的div一样。（注意这只需要在webkit中工作）

div获取父容器的宽度，而按钮仅占用显示其内容所需的位置。

我该如何改变？

我不想设置宽度：100％之类的东西，因为如果你在带有display：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>

Answer 1

如果您的按钮位于带有“display：-webkit-box”的容器中，则只需将“-webkit-box-flex：1”添加到该容器中的按钮（或任何元素）即可。这解决了它。

http://jsfiddle.net/y53VT/

Answer 2

我不确定为什么你的-webkit规则上有反斜杠。删除它们并且它们的行为与div相同，除了一些需要重置的继承样式。

您可以在此处看到一个与webkit框很好地匹配的按钮和输入示例： http://jsfiddle.net/dt592/

Answer 3

也许你应该更具体一点。在你的CSS中尝试button.mybutton { ...

强制按钮元素布局像div

3 个答案: