html - 如何移动下一行的元素？

Question

如何让按钮停留在文本下方？如果我做 <br>按钮超出了 div。为什么？

.dropzone {
    border: 2px dashed #ccc;
    width: 100%;
    height: 200px;
    color: #ccc;
    text-align: center;
    line-height: 200px;
}

<div class="dropzone" id="dropzone">
  <span>Drag and drop a file or</span>
  <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
  <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>

Answer 1

当您插入 <br> 时，输入超出了 div标记，因为您将行高设置为 200px。 <br>代表一个新行，显然与其他行的间距为 200px。以下代码显示 <span> 下的按钮:

.dropzone {
    border: 2px dashed #ccc;
    max-width: 100%;
    color: #ccc;
    padding: 50px;
    text-align: center;
}

<div class="dropzone" id="dropzone">
  <span>Drag and drop a file or</span><br>
  <input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
  <label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>