如何在下一行中移动元素？

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> 

Answer 2

如果删除line-height:200px; 它不会将按钮向下按下200px。 您可以使用<p>标记而不是span，它会在不需要<br>情况下将文本移到下面。

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

 <div class="dropzone" id="dropzone"> <p>Drag and drop a file or</p> <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 3

尝试这个：

.button {
  display: block;
}

这应该将按钮放置在其后面的元素下方。

Answer 4

当在文本后插入<br>时，使用line-height是在div之外按下按钮的原因。 如果要使用换行符，建议将其删除；如果要垂直对齐div内容，则建议查看flexbox或padding属性。

例如：

 .dropzone { border: 2px dashed #ccc; width: 100%; height: 200px; padding: 10px; color: #ccc; text-align: center; /* line-height: 200px; */ display: flex; flex-direction: column; justify-content: center; } 

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

Answer 5

添加了一些CSS和br标签

 .dropzone { border: 2px dashed #ccc; max-width: 100%; color: #ccc; padding: 50px; text-align: left; } .dropzone span{ margin-bottom:5px; display:inline-block; } 

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