Question

如何让按钮留在文字下？如果我执行 按钮超出了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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您移除line-height:200px;，则不会将按钮按下200px。您可以使用代码而不是span，它会在不需要 的情况下移动文本。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

.button {
  display: block;
}

这应该将按钮放在它后面的元素下面。

Answer 4

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

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

5 个答案: