时间戳

首页 > 解决方案 > 右导航栏向下滚动

html - 右导航栏向下滚动

问题描述

如何解决？我是前端的新手：/ 最小化之前 我正在使用 w3-sidebar w3-bar-block w3-card 类。

      <div id ="menu" class="w3-sidebar w3-bar-block w3-card" style="width:13%;right:0;">
        <h3 class="w3-bar-item">Sort</h3>
        <a href="#" class="w3-bar-item w3-button">Price</a>
        <a href="#" class="w3-bar-item w3-button">Name</a>
        <div *ngIf="authService.isLogged"  class="cartItemsh">   <!--  -->
          <h3 class="w3-bar-item">Your cart: <b>${{ cartSum.toFixed(2) }}</b></h3>   <!-- cart -->
          <div  *ngFor="let item of cartItems"  class="cart"> <!--  -->
            <ul class="w3-bar-item" id="cartItems">
                  <div class="oneCartItem">
                      <li class="liItem">
                        <div class="nameCart">{{ item.name }}</div>
                        <span class="avatar"><img src="{{ item.imgurl }}" width="64px" height="64px"></span>
                        <span class="priceCart"><b> ${{ item.price }}</b></span>
                        <span class="quantCart">{{ item.quant }}</span>
                        <span class="removeItem"><img class="removeItemButton" src="{{ removeImage }}" title="Click to remove item" (click)="deleteFromCart(item.name)"></span>
                       </li>
                    </div>
            </ul>
        </div>
       </div>
      </div>

标签： htmlcss

解决方案

我刚刚复制了 W3S 示例，它似乎工作得很好。请尝试如下使用：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<div class="w3-sidebar w3-bar-block w3-card" style="width:25%;right:0;">
  <h3 class="w3-bar-item">Menu</h3>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-right:25%">

<div class="w3-container w3-teal">
  <h1>My Page</h1>
</div>

<div class="w3-container">
<h2>Right Sidebar</h2>

</div>

</div>

推荐阅读