Fatal编程技术网
  • css/
  • Css 强制按钮元素像div一样布局

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

css

Css 强制按钮元素像div一样布局,css,webkit,Css,Webkit,我试图用按钮元素替换div元素以提高可访问性，但我需要按钮像过去那样进行布局。（注意这只需要在webkit中使用） div占据父容器的宽度，而按钮只占据显示其内容所需的位置 我怎样才能改变这一点 我不想设置像width:100%这样的值，因为如果在带有display:webkit框的容器中使用一个以上的按钮，那么divs的布局将很好地使用剩余的空间 下面是一个小的示例： <!DOCTYPE html> <html> <head> <

我试图用按钮元素替换div元素以提高可访问性，但我需要按钮像过去那样进行布局。（注意这只需要在webkit中使用）

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

我怎样才能改变这一点

我不想设置像width:100%这样的值，因为如果在带有display:webkit框的容器中使用一个以上的按钮，那么divs的布局将很好地使用剩余的空间

下面是一个小的示例：

<!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>


按钮测试
.我的按钮{
显示：块；
边框：1px纯红；
-webkit外观：无；
-webkit边界半径：6px；
背景色：透明；
-webkit渐变（线性、左下、左上、颜色停止（0，#A8ACB9）、颜色停止（1，#eee））；
文本对齐：居中；
}
Div按钮
按钮
也许你应该说得更具体些。请在css中尝试
button.mybutton{
。

我不知道为什么在
-webkit
规则上有反斜杠。删除它们，它们的行为将与div相同，但某些继承的样式需要重置

您可以在此处看到按钮和输入与webkit box配合良好的示例：

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

样式应用得很好。因此匹配更具体的内容不会改变任何东西。无论如何，谢谢：）将周围的div设置为显示：-webkit box。如果没有它，效果很好，尽管它们的渲染方式不同。我无法添加周围的div。-webkit box被添加到父容器中，而不是灵活的元素中，请参见是的，我知道，但是t在我的例子中，我无法更改父对象的显示。它们的工作方式应该与示例中发布的相同。水平展开。我无法添加容器。在我的小示例中，我需要按钮来布局相同的内容，而不更改dom结构。如果不更改dom来添加外部容器，似乎是不可能的。我已经修补了一段时间了button元素会收缩以适应其内容，除非给出明确的维度。