html - 如何让下拉菜单出现在div前面?

标签 html css

您好,我对顶部导航进行了这样的安排,左侧包含 3 个不同的按钮,中间包含一个长按钮,右侧包含一个 3 点按钮。

三个点是下拉菜单。但是,我的下拉菜单似乎出现在 div 面板容器后面。我读过很多在线解决方案说是由溢出引起的:隐藏但是在我的情况下,我需要溢出:隐藏以便左,中和右对齐工作。但是,这会导致我的下拉菜单出现在后面。知道如何解决这个问题吗?下面是我的代码:

CSS:

    body {
      height: 100%;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      padding: 0;
      margin: 0;
    }

    .page-container {
      height: 80vh;
      margin-top: 10px  
    }

    .panel-container {
      display: flex;
      height: 100%;
      flex-direction: row;
      border: 2px solid #000;
      overflow: auto;
      xtouch-action: none;
    }

.....
....
/**********Alignment for top navigation*************/
    .topheader {
      margin-bottom:7px;
      width:100%;
    }

    .topright{
        width: auto;
        overflow:hidden;
        background-color:#1E90FF;
        color:#fff;
        font-weight:bold;
        font-size:19px;
        margin:3px;
        border-radius:7px;
        padding:5px;
        text-align:center;
    }

    .topleft{
        float:left;
        width:350px;
        padding:3px;
    }


    .nav-tab .nav-items {
      border-style: none;
      background-color:#1E90FF;
      font-weight:bold;
      font-size:12px;
      margin:1px;
      border-radius:5px;
      padding:5px;
    }

    .nav-tab .nav-link {
        color: #fff;
    }

    .threedots:after {
      content: '\2807';
      color: #fff;
       font-size:17px;
    }

HTML:

<div class="page-container">

            <div class="topheader">
                <div class="topleft">
                    <ul class="nav nav-tab" id="myTab" role="tablist">
                        <li class="nav-items">
                            <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one"
                            aria-selected="true">2019-01-01</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two"
                            aria-selected="false">2019-01-02</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three"
                            aria-selected="false">2019-01-03</a>
                        </li>

                    </ul>
                </div>

                <div class="topright">
                    <div class="row">
                        <div class="col-md-11">
                            Kelvin
                        </div>
                        <div class="col-md-1">
                                    <div class="dropdown">
                                      <button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
                                      <span class="caret"></span></button>
                                      <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="#">HTML</a></li>
                                        <li><a href="#">CSS</a></li>
                                        <li><a href="#">JavaScript</a></li>
                                      </ul>
                                    </div>

                        </div>
                    </div>
                </div>
            </div>

<div class="panel-container">

....
....
....

下面是隐藏下拉菜单的地方 Below is where the drop down menu is being hidden

最佳答案

topheader 上尝试 display: flex 并在 topright div 上添加 flex-grow: 1。您应该能够在不溢出的情况下实现标题对齐:隐藏。同时从 topleft

中移除 float: left

body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
}

.page-container {
  height: 80vh;
  margin-top: 10px
}

.panel-container {
  display: flex;
  height: 100%;
  flex-direction: row;
  border: 2px solid #000;
  overflow: auto;
  xtouch-action: none;
}

.topheader {
  margin-bottom: 7px;
  display: flex;
}

.topright {
  background-color: #1E90FF;
  color: #fff;
  font-weight: bold;
  font-size: 19px;
  margin: 3px;
  border-radius: 7px;
  padding: 5px;
  text-align: center;
  flex-grow: 1;
}

.topleft {
  width: 350px;
  padding: 3px;
}

.nav-tab .nav-items {
  border-style: none;
  background-color: #1E90FF;
  font-weight: bold;
  font-size: 12px;
  margin: 1px;
  border-radius: 5px;
  padding: 5px;
}

.nav-tab .nav-link {
  color: #fff;
}

.threedots:after {
  content: '\2807';
  color: #fff;
  font-size: 17px;
}

.dropdown-menu {
  color: #000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="page-container">
  <div class="topheader">
    <div class="topleft">
      <ul class="nav nav-tab" id="myTab" role="tablist">
        <li class="nav-items">
          <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one" aria-selected="true">2019-01-01</a>
        </li>
        <li class="nav-items">
          <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two" aria-selected="false">2019-01-02</a>
        </li>
        <li class="nav-items">
          <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">2019-01-03</a>
        </li>

      </ul>
    </div>

    <div class="topright">
      <div class="row">
        <div class="col-md-11">
          Kelvin
        </div>
        <div class="col-md-1">
          <div class="dropdown">
            <button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
                                  <span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">JavaScript</a></li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

关于html - 如何让下拉菜单出现在div前面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58552667/

相关文章:

html - 使用 CSS float :left and float:right, 或使用 CSS margin-left 和位置 :absolute? 实现此布局

php - 更改 wordpress the_content() 帖子的字体颜色

html - 旋转和缩放脚本

javascript - 如何在 Highcharts 仪表弧图中更改纵横比和删除间距

html - 空的 HTML 元素无意中用它的内容包裹了另一个元素

html - 使用三元运算符返回 HTML

javascript - 滚动到带有 foreach 循环的部分滚动到错误的部分

javascript - 从 html 中获取 SVG 以备后用

html - : codes for CSS有哪些

javascript - 悬停时带有边框底部的纯 CSS 等高列?