更改固定边栏的位置

问题描述 投票：2回答：4

这段代码：

<!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;
    left: 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-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;}
    }
    </style>
    </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>

在左边生成一个固定的侧边栏：qazxsw poi

但我想改变右边的位置。像这样：enter image description here

那我怎么能把固定的滑杆放到右边？我可以在哪个命令中移动页面周围的固定侧边栏？

感谢您的帮助 ：）

html css css3
4个回答
3
投票

在这种情况下，您可以设置enter image description here，但然后必须从.sidenav {right: 10px;}中删除边距，并查看内容在.main div上添加一个宽度，您可以根据内容调整。

根据.main的大小，使用.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;}
}
3
投票

只需将<!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> 设置更改为left为侧边栏，将right更改为margin-left为margin-right

main
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;
  }
}
2
投票

试试这个：

<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>
0
投票

这会奏效。

<!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> 
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;}
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.