Question

我有3个按钮，根据按钮文字的宽度有宽度。这仅适用于display：inline，但我不想让按钮排成一行。如何从上到下列出按钮？

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 example

.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;   
}

按钮大小根据按钮文本

3 个答案: