Question

我有一个按钮元素和一个div元素。

BUTTON元素占用了内容所需的空间。

DIV元素占据整个宽度，因为它是块元素。我尝试在按钮上设置display:block，但没有做任何事情。也没有width:auto。

我希望BUTTON在我给出的示例中表现得像DIV（请参阅下面的链接）。我不希望它看起来像DIV - 我知道我可以设置一个手动宽度，但我希望它表现得像一个块元素，它会自动占用整个可用空间。

这可能吗？怎么样？

Answer 1

您必须为按钮元素设置min-width。检查 DEMO 。

.container button,
.container div {
    display:block;
    min-width:100%; /*this makes the button extenable*/
}

Answer 2

默认Div元素占用一行。但巴顿不是那样的，所以你必须提到它的高度和宽度......

Answer 3

<强> HTML

    <div class="container">
    <button>A button</button>
    <div>A div</div>
    </div>

<强> CSS

    * {
       border:0;
      }

    .container {
      outline:1px solid red;   
      padding: 0 3px 0 3px;
    }


    .container div {
      background-color:#33d;
    }

    .container button {
      background-color:#d33;
      box-sizing: border-box;
      width: 100%;
    }

如何使按钮元素像块元素一样（按维度）

3 个答案: