Question

此代码：

＆＃13;

{
    "access_token": "867ab2c1-5afa-39f3-a897-5ff4b8a3232b",
    "scope": "am_application_scope default",
    "token_type": "Bearer",
    "expires_in": 305
}

＆＃13;

在左侧生成固定滑块：

但我想改变右边的位置。像这样：

那么如何才能将固定滑块放到右侧？我可以在哪个命令中移动页面周围的固定边栏？

感谢您的帮助:)

Answer 1

在这种情况下，您只需设置.sidenav {right: 10px;}，然后必须从.main删除边距，并查看内容在.main div上添加宽度，您可以根据需要调整基于内容。

使用.main {margin-right: 140px;}也可以根据.sidediv {width: 130px;}。

的大小进行操作

body {
font-family: "Lato", sans-serif;
}

.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}

.sidenav a:hover {
color: #064579;
}

.main { 
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
width: 75%;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    </div>
<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always             
  shown.</p>
 <p>Scroll down the page to see the result.</p>
 </div>
 </body>
 </html>

Answer 2

只需将侧栏的left设置更改为right，margin-left的{{1}}更改为margin-right

＆＃13;

main

＆＃13;

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  right: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-right: 140px;
  /* Same width as the sidebar + left position in px */
  font-size: 28px;
  /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

＆＃13;

Answer 3

试试这个：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}

.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}

.sidenav a:hover {
color: #064579;
}

.main {
margin-right: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar is as tall as its content (the links), and is always             
  shown.</p>
 <p>Scroll down the page to see the result.</p>
 </div>
  
  
<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    </div>
  
 </body>
 </html>

＆＃13;

Answer 4

这样可行。

var width = screen.width -138 +"px";
var sidenav = document.getElementById("sidenav");
sidenav.style.left = width;

body {
    font-family: "Lato", sans-serif;
    }

    .sidenav {
    width: 130px;
    position: fixed;
    z-index: 1;
    top: 20px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
    }

    .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
    }

    .sidenav a:hover {
    color: #064579;
    }

    .main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    }

    @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    }

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {

    </style>
    </head>
    <body>

    <div class="sidenav" id="sidenav">
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#clients">Clients</a>
      <a href="#contact">Contact</a>
        </div>
    <div class="main">
      <h2>Auto Sidebar</h2>
      <p>This sidebar is as tall as its content (the links), and is always             
      shown.</p>
     <p>Scroll down the page to see the result.</p>
     </div>
     </body>
     </html>

更改固定边栏的位置

4 个答案: