html - 我怎样才能让一个 div 站在另一个元素（它下面的元素）的正上方？

问题描述

我希望“上传文件”和“新目录”这两个按钮位于文本“目录路径：主要”的正上方，但位于搜索表单的右侧（如图所示）。

放置“margin top: 11em”或类似的东西确实会使按钮移动到下方（这是我目前所做的）。但这并没有使网站看起来更好：当您在搜索表单上添加大量标签时，按钮位于同一个位置。或者当您调整窗口大小时，按钮与搜索保持“太远的距离”。

这两个按钮被放置在 <div id="upload-buttons> 中。在 HTML 文件中位于 <div class="search"> 之后，即位于右侧的搜索表。就在“upload-buttons”之后<div 类="概述>。“上传按钮”和“搜索”都放在 <div id="container> 中。

这是我在 HTML 代码中写的（它是一个 Twig 模板，但与 HTML 没有什么不同）：

          <div id="container">
          <div class="search">
{#              <p>Today's date is: {{ object.date|date("Y-m-d") }}</p>#}
      <table id="search-form">
              <form method = "get">
                  <tr>
              <th colspan="2">
                  <label>Search in file database </label>
              </th>
              <th colspan="2">
                  <label>Search by tags</label>
              </th>
                  </tr>
                  <tr>
                      <td>
                  <br><input type="search" name="query" placeholder="Search" maxlength="45">
                 <br><button type="submit" name="search" value="search">Search</button>
              </td>
              <td>
                      <label for="start">Start date range:</label>
                      <br><input type="date" id="from date" name="from-date"
                                 value=""
                                 min="2020-03-01" max="">
                  <br><label for="end">End date range:</label>
                  <br><input type="date" id="to date" name="to-date"
                             value=""
                             min="2020-03-01" max="">
              </td>
                      <td>
                      </td>
              </form>
              <form method = "get">
                  <td>
                      <br><input type="text" name="tags" data-role="tagsinput" placeholder="tag1,tag2,tag3">
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                      <script src="{{ rel }}js/dist/bootstrap-tagsinput.min.js"></script>
                      <br><button type="submit" name="search" value="tagssearch">Search</button>
                  </td>
                  <td>
                  <input type="checkbox" name="andcondition" value="1">
                  Check if you want each file to include all tags (AND condition)
                  </td>
                  </tr>
              </form>
          </table>
              </div>
              <div id="upload-buttons">
                  <a href="{{rel}}file-upload/" class="button-white">Upload File</a>
                  <a href="{{rel}}new-catalog/" class="button-white">New Catalog</a>
              </div>
          </div>
          <div class="overview">

              <a id="catalogpath">
                  Catalog path: {{ catalogPath }}
              </a>

这就是我用 CSS 写的：

    #container {
        position: relative;
    }

search {
    float: right;
    width: 45em;
    height: fit-content;
    background: midnightblue;
    border-radius: 0.5em;
    padding: 1em;
    margin: 1em;
    display: inline-block;
}

#search-form table {
    vertical-align: top;
}


    #search-form td, #search-form tr, #search-form th{
        border-left: solid 0.5em transparent;
        border-right: solid 0.5em transparent;
    }

    /*FILES AND OVERVIEW*/

    #upload-buttons {
        display: inline-block;
        margin-top: 11em;
    }

    .overview {
        clear: both;
    }



    #catalogpath {
        font-size: 2em;
        color: gold;
        white-space: nowrap;
    }

我试过：将“上传按钮”放在“概述”中。然后它出现在目录路径的正上方，但它们不会留在搜索表单的左侧。

我在“上传按钮”和“容器”上尝试了垂直对齐和垂直对齐属性，但它们仍然留在同一个地方。

如何使按钮保持在搜索表单的正上方（或几乎在“目录路径”的正上方），但又不会使按钮与上面的任何元素相距太大？

标签： htmlcssmargin

html - 我怎样才能让一个 div 站在另一个元素（它下面的元素）的正上方？

问题描述

解决方案

推荐阅读