Question

基本上，我的引导垂直导航栏的边距从其右侧一直延伸到页面的右侧。

这是我的垂直导航栏的外观，只有页面上没有任何其他内容。但是，当我在页面上添加另一个元素时，它会将其向下推，如下图所示，黑匣子被向下推。以红色突出显示的是导航栏创建的边距。

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
crossorigin="anonymous">
<link rel = "stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2? 
family=Montserrat:wght@100;200;300;400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2d7a97658d.js" crossorigin="anonymous"></script>




  <title>Hello, world!</title>
  </head>
  <body>
    
    
        <ul class="nav flex-column">
            <div class = "section-1">
                <div class = "nav-title"><i class="fas fa-user icon"></i>User</div>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#">Settings <i class="fas fa-angle-right 
                    arrow"></i></a>
                </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">Notifications</a>
               </li>  
            </div>
      
      <div class = "nav-title"><i class="fas fa-wallet icon"></i>Billing</div>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          
      </ul>

   
   <div class = "info-box">
       
       Hello
       
       
       
       
       
   </div>


 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
    DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> 
   </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" 
     integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" 
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
crossorigin="anonymous"></script>
  </body>
</html>

.flex-column, .nav {width: 25%;
background-color: #f4f4f8;
height: 100vh;
margin-right: 0 !important;}

.nav-title {display: block;
    padding: .5rem 1rem;
    font-size: 1.2em;
    font-family: 'Montserrat';}

a {text-decoration: none !important;
color: rgba(0, 0, 0, 0.6);
list-style: none;}

.nav-link {padding-left: 2em !important;
           font-size: 1.1em ;
            transition:color 0.2s, background-color 0.4s, padding 0.4s;
            
            }


.nav-link:link {padding-left: 1em !important;
           font-size: 1.1em;
            }


.nav-link:hover {
    padding-left: 1.5em !important;
    font-size: 1.1em;
    background-color: #f0f0f4;
    
            }


.nav-link {padding-left: 1em !important;
           font-size: 1.1em ;
            transition:color 0.2s, background-color 0.4s, padding 0.4s;
            
            
            }


.nav-link:link {padding-left: 1em !important;
           font-size: 1.1em;
            
            }


.nav-link:hover {
    padding-left: 1.5em !important;
    font-size: 1.1em;
    background-color: #f0f0f4;
    color: #009dff !important;
    
            }

.active {
    padding-left: 1.5em !important;
    font-size: 1.1em!important;
    background-color: #f0f0f4!important;
    color: #009dff!important;}

.active:link {
    padding-left: 1.5em !important;
    font-size: 1.1em!important;
    background-color: #f0f0f4!important;
    color: #009dff!important;}

.active;hover {
    padding-left: 1.5em !important;
    font-size: 1.1em!important;
    background-color: #f0f0f4!important;
    color: #009dff!important;}

.arrow {
margin-left:65%;
display: flex;
margin-top: none !important;}

.icon {margin: auto 0.1em;}

.info-box {width: 5em;
height: 10em;
margin-top: 0.2em;
margin-right: auto;
margin-left: auto;
background-color: black;
display: block;}

https://codepen.io/smallbluecactus/pen/YzqbQjX

请确保将其放入您的代码编辑器中，因为它在Codepen上看起来有所不同。

Answer 1

您需要在ul周围放置一个容器，以告知区域间距变得对齐。现在，您的ul nav仅凭其弹性装箱。您尝试放置在其旁边的所有内容都将位于下方，因为您需要将导航器与要放置在其旁边的所有内容分组。如果您检查一下，尽管它看起来像那样，导航仪在技术上没有任何裕度。

    <div class="d-flex">
        <ul class="nav flex-column">
            <div class = "section-1">
                <div class = "nav-title"><i class="fas fa-user icon"></i>User</div>
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#">Settings <i class="fas fa-angle-right arrow"></i></a>
                </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">Notifications</a>
               </li>  
            </div>
      
      <div class = "nav-title"><i class="fas fa-wallet icon"></i>Billing</div>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          
      </ul>

   
   <div class = "info-box">
       Hello
   </div>
</div>

为什么我的垂直引导导航栏破坏了我的页面？

1 个答案: