强制按钮元素像 div 一样布局答案

【问题标题】：Force button element to layout like div强制按钮元素像 div 一样布局
【发布时间】：2011-12-02 00:53:28
【问题描述】：

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

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

我该如何改变呢？

我不想设置像 width: 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>

【问题讨论】：

标签： css webkit

【解决方案1】：

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

http://jsfiddle.net/y53VT/

【讨论】：

我无法添加容器。我需要按钮在我的小示例中进行相同的布局而不更改 dom 结构
似乎不改变 DOM 以添加外部容器是不可能的。一直在摆弄它。除非给定明确的尺寸，否则按钮元素会缩小以适应其内容。

【解决方案2】：

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

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

【讨论】：

周围的 div 设置为显示：-webkit-box。它工作正常，没有它，尽管它们呈现不同。我无法添加周围的 div。
-webkit-box 被添加到父容器，而不是灵活的元素，见html5rocks.com/en/tutorials/flexbox/quick
是的，我知道，但就我而言，我无法更改父级的显示
它们应该像示例中发布的那样工作。水平展开。

【解决方案3】：

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

【讨论】：

样式应用得很好。所以更具体的匹配不会改变任何事情。无论如何谢谢:)