html - 根据按钮文本的按钮大小

Question

我有 3 个按钮，其宽度应根据按钮文本的宽度而定。这仅适用于 display: inline，但我不想将按钮排成一行。如何从上到下列出按钮？

js小提琴

CSS

 .wrap{
  width: 400px;
  height: 100px;
  background: red;

  }

.button{
     display:inline;
    background: white;
    padding: 0.1rem;
}

HTML

<div class="wrap">
            <div class="button">one</div>
            <div class="button">two</div>
            <div class="button">three</div>
        </div>

Answer 1

一个简单的方法是使用浮点数。删除显示规则并添加：

clear:left;
float:left;

jsFiddle 示例

.button{
    clear:left;
    float:left;
    background: white;
    padding: 0.1rem;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

Answer 2

您只需要清除并向左浮动，并删除 .button 上的显示。

然后你的代码保持良好：

CSS

.wrap
{
  width: 400px;
  height: 100px;
  background: red;
  }

.button
{
    clear:left;
    float:left;
    background: white;
    padding: 0.1rem;
}

HTML

<div class="wrap">
    <div class="button">one</div>
    <div class="button">two</div>
    <div class="button">three</div>
</div>

如果这不是您需要的，请告诉我

Answer 3

尝试：

.button:after{
    content: "";
    display: block;   
}