时间戳

首页 > 解决方案 > 浮动：内容太长时右推插入符号，如何工作？

html - 浮动：内容太长时右推插入符号，如何工作？

问题描述

HTML：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import bootstrap 4 css-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!--import local css-->
    <link rel="stylesheet" type="text/css" href="./css/common_style.css">
    <title>test</title>
</head>
<body>
    <header>
      <!-- Top navbar-->
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <!-- Navbar brand -->
        <a class="navbar-brand" href="*">Navbar</a>
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="topNav">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> Test </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#"> Test </a></li>
                <li><a class="dropdown-item dropdown-toggle" href="#"> Test 1 </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="">HTML</a></li>
                    <li><a class="dropdown-item" href="">CSS</a></li>
                    <li><a class="dropdown-item" href="">JavaScript</a></li>
                    <li><a class="dropdown-item" href="">Bootstrap</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item dropdown-toggle" href="">Other </a>
                      <ul class="submenu dropdown-menu">
                        <li><a class="dropdown-item" href="">Multi level 1</a></li>
                        <li><a class="dropdown-item" href="">Multi level 2</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a class="dropdown-item dropdown-toggle" href="#"> Test 2 </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="">HTML</a></li>
                    <li><a class="dropdown-item" href="">CSS</a></li>
                    <li><a class="dropdown-item" href="">JavaScript</a></li>
                    <li><a class="dropdown-item" href="">Bootstrap</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item dropdown-toggle" href="">Other </a>
                      <ul class="submenu dropdown-menu">
                        <li><a class="dropdown-item" href="">Multi level 1</a></li>
                        <li><a class="dropdown-item" href="">Multi level 2</a></li>
                    </ul>
                    </li>
                  </ul>
                </li>
                <div class="dropdown-divider"></div>
                <li><a class="dropdown-item dropdown-toggle" href="#">Other </a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">  More items  </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
                <li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 2 with extra words </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="">HTML</a></li>
                    <li><a class="dropdown-item" href="">CSS</a></li>
                    <li><a class="dropdown-item" href="">JavaScript</a></li>
                    <li><a class="dropdown-item" href="">Bootstrap</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item dropdown-toggle" href="">Other </a>
                      <ul class="submenu dropdown-menu">
                        <li><a class="dropdown-item" href="">Multi level 1</a></li>
                        <li><a class="dropdown-item" href="">Multi level 2</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 3 </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="">Another submenu 1</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 2</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 3</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 4</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item dropdown-toggle" href="#"> Dropdown item 4 </a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="">Another submenu 1</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 2</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 3</a></li>
                    <li><a class="dropdown-item" href="">Another submenu 4</a></li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="#"> Dropdown item 4 </a></li>
                <li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
              </ul>
            </li>
          </ul>
          <!-- Links -->
          <form class="form-inline ml-auto">
            <div class="md-form my-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"></div>
          </form>
        </div>
      </nav>
    </header>
</body>

CSS：

/*Mult-level dropdown menu css*/
@media (min-width: 992px){
    .dropdown-menu li {
        position: relative;
    }
    .dropdown-menu:hover > li:hover > .submenu {
        display: inline-block;
    }
    .dropdown-menu .dropdown-toggle:after {
        -ms-transform: rotate(-90deg); /* IE 9 */
        -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
        transform: rotate(-90deg);
        margin-top: 10px;
        float: right;
    }
    .nav-item .submenu { 
        display: none;
        left:100%; 
        top:-8px;
    }
}

截图： 在此处输入图像描述

在 jsfiddle 上运行：https ://jsfiddle.net/nLcq9b62/1/

如您所见，插入符号由于浮动：右而被向下推，但如果删除浮动：右将在内容旁边对齐插入符号，这是不希望的。

在插入符号未被按下的情况下，如何正确对齐插入符号？另外，我想让代码简单易行，所以尽可能少做一些改动会很好。

标签： htmlcssbootstrap-4

解决方案

好的，我找到方法了。通过设置.dropdown-toggle并absolute定位它来right:10px固定它。感谢帮助。

推荐阅读