如何将此侧边栏对齐到右侧而不是左侧？

时间：2019-07-14 10:43:14

标签： html css

我正在努力实现带有切换图标的响应式侧边栏。我在Codepen上碰到了这个，但是它在左边对齐，我如何在右边对齐呢？

我找不到在代码中它向左对齐以使其向右对齐的位置。我尝试使用文本对齐和自我证明，但没有机会。 

/* Primary Styles */
*, *::before, *::after {
   box-sizing: border-box;
}

body {
   font-family: sans-serif;
   font-size: 1em;
   color: #333;
}

h1 {
  font-size: 1.4em;
}

em {
   font-style: normal;
}

a {
   text-decoration: none;
   color: inherit;
} 

/* Layout */
.s-layout {
   display: flex;
   width: 100%;
   min-height: 100vh;
}

.s-layout__content {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}

/* Sidebar */
.s-sidebar__trigger {
   z-index: 2;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 4em;
   background: #192b3c;
}

.s-sidebar__trigger > i {
   display: inline-block;
   margin: 1.5em 0 0 1.5em;
   color: #f07ab0;
}

.s-sidebar__nav {
   position: fixed;
   top: 0;
   left: -15em;
   overflow: hidden;
   transition: all .3s ease-in;
   width: 15em;
   height: 100%;
   background: #243e56;
   color: rgba(255, 255, 255, 0.7);
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
   left: 0;
}

.s-sidebar__nav ul {
   position: absolute;
   top: 4em;
   left: 0;
   margin: 0;
   padding: 0;
   width: 15em;
}

.s-sidebar__nav ul li {
   width: 100%;
}

.s-sidebar__nav-link {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 4em;
}

.s-sidebar__nav-link em {
   position: absolute;
   top: 50%;
   left: 4em;
   transform: translateY(-50%);
}

.s-sidebar__nav-link:hover {
   background: #4d6276;
}

.s-sidebar__nav-link > i {
   position: absolute;
   top: 0;
   left: 0;
   display: inline-block;
   width: 4em;
   height: 4em;
}

.s-sidebar__nav-link > i::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* Mobile First */
@media (min-width: 42em) {
   .s-layout__content {
      margin-left: 4em;
   }
   
   /* Sidebar */
   .s-sidebar__trigger {
      width: 4em;
   }
   
   .s-sidebar__nav {
      width: 4em;
      left: 0;
   }
   
   .s-sidebar__nav:hover,
   .s-sidebar__nav:focus,
   .s-sidebar__trigger:hover + .s-sidebar__nav,
   .s-sidebar__trigger:focus + .s-sidebar__nav {
      width: 15em;
   }
}

@media (min-width: 68em) {
   .s-layout__content {
      margin-left: 15em;
   }
   
   /* Sidebar */
   .s-sidebar__trigger {
      display: none
   }
   
   .s-sidebar__nav {
      width: 15em;
   }
   
   .s-sidebar__nav ul {
      top: 1.3em;
   }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="s-layout">
<!-- Sidebar -->
<div class="s-layout__sidebar">
  <a class="s-sidebar__trigger" href="#0">
     <i class="fa fa-bars"></i>
  </a>

  <nav class="s-sidebar__nav">
     <ul>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-home"></i><em>Home</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
             <i class="fa fa-user"></i><em>My Profile</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-camera"></i><em>Camera</em>
           </a>
        </li>
     </ul>
  </nav>
</div>

<!-- Content -->
<main class="s-layout__content">
  <h1>Full View, Please!</h1>
</main>
</div>

2 个答案:

答案 0 :(得分：4)

检查以下内容：边栏右对齐，并且也响应 

  /* Primary Styles */
    *, *::before, *::after {
       box-sizing: border-box;
    }

    body {
       font-family: sans-serif;
       font-size: 1em;
       color: #333;
    }

    h1 {
      font-size: 1.4em;
    }

    em {
       font-style: normal;
    }

    a {
       text-decoration: none;
       color: inherit;
    } 

    /* Layout */
    .s-layout {
       display: flex;
       width: 100%;
       min-height: 100vh;
    }

    .s-layout__content {
       display: flex;
       justify-content: center;
       align-items: center;
       flex: 1;
    }

    /* Sidebar */
    .s-sidebar__trigger {
       z-index: 2;
       position: fixed;
       top: 0;
       right: 0;
       width: 4em;
       height: 4em;
       background: #192b3c;
    }

    .s-sidebar__trigger > i {
       display: inline-block;
       margin: 1.5em 0 0 1.5em;
       color: #f07ab0;
    }

    .s-sidebar__nav {
       position: fixed;
       top: 0;
       right: -176px;
       overflow: hidden;
       transition: all .3s ease-in;
       width: 15em;
       height: 100%;
       background: #243e56;
       color: rgba(255, 255, 255, 0.7);
    }

    .s-sidebar__nav:hover,
    .s-sidebar__nav:focus,
    .s-sidebar__trigger:focus + .s-sidebar__nav,
    .s-sidebar__trigger:hover + .s-sidebar__nav {
       right: 0;
    }

    .s-sidebar__nav ul {
       position: absolute;
       top: 4em;
       left: 0;
       margin: 0;
       padding: 0;
       width: 15em;
    }

    .s-sidebar__nav ul li {
       width: 100%;
    }

    .s-sidebar__nav-link {
       position: relative;
       display: inline-block;
       width: 100%;
       height: 4em;
    }

    .s-sidebar__nav-link em {
       position: absolute;
       top: 50%;
       left: 4em;
       transform: translateY(-50%);
    }

    .s-sidebar__nav-link:hover {
       background: #4d6276;
    }

    .s-sidebar__nav-link > i {
       position: absolute;
       top: 0;
       left: 0;
       display: inline-block;
       width: 4em;
       height: 4em;
    }

    .s-sidebar__nav-link > i::before {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
    }

    /* Mobile First */
    @media (min-width: 42em) {
       .s-layout__content {
          margin-left: 4em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          width: 4em;
       }
       
       .s-sidebar__nav {
          width: 4em;
          right: 0;
       }
       
       .s-sidebar__nav:hover,
       .s-sidebar__nav:focus,
       .s-sidebar__trigger:hover + .s-sidebar__nav,
       .s-sidebar__trigger:focus + .s-sidebar__nav {
          width: 15em;
       }
    }

    @media (min-width: 68em) {
       .s-layout__content {
          margin-left: 15em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          display: none
       }
       
       .s-sidebar__nav {
          width: 15em;
       }
       
       .s-sidebar__nav ul {
          top: 1.3em;
       }
    }
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="s-layout">
    <!-- Sidebar -->
    <div class="s-layout__sidebar">
      <a class="s-sidebar__trigger" href="#0">
         <i class="fa fa-bars"></i>
      </a>

      <nav class="s-sidebar__nav">
         <ul>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-home"></i><em>Home</em>
               </a>
            </li>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                 <i class="fa fa-user"></i><em>My Profile</em>
               </a>
            </li>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-camera"></i><em>Camera</em>
               </a>
            </li>
         </ul>
      </nav>
    </div>

    <!-- Content -->
    <main class="s-layout__content">
      <h1>Full View, Please!</h1>
    </main>
    </div>

答案 1 :(得分：2)

/* Primary Styles */
*, *::before, *::after {
   box-sizing: border-box;
}

body {
   font-family: sans-serif;
   font-size: 1em;
   color: #333;
}

h1 {
  font-size: 1.4em;
}

em {
   font-style: normal;
}

a {
   text-decoration: none;
   color: inherit;
} 

/* Layout */
.s-layout {
   display: flex;
   width: 100%;
   min-height: 100vh;
}

.s-layout__content {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}

/* Sidebar */
.s-sidebar__trigger {
   z-index: 2;
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 64px;
   background: #192b3c;
}

.s-sidebar__trigger > i {
   display: inline-block;
   margin: 1.5em 0 0 1.5em;
   color: #f07ab0;
}

.s-sidebar__nav {
   position: fixed;
   top: 0;
   right: -15em;
   overflow: hidden;
   transition: all .3s ease-in;
   width: 15em;
   height: 100%;
   background: #243e56;
   color: rgba(255, 255, 255, 0.7);
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
   right: 0;
}

.s-sidebar__nav ul {
   position: absolute;
   top: 4em;
   right: 0;
   margin: 0;
   padding: 0;
   width: 15em;
}

.s-sidebar__nav ul li {
   width: 100%;
}

.s-sidebar__nav-link {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 4em;
}

.s-sidebar__nav-link em {
   position: absolute;
   top: 50%;
   right: 4em;
   transform: translateY(-50%);
}

.s-sidebar__nav-link:hover {
   background: #4d6276;
}

.s-sidebar__nav-link > i {
   position: absolute;
   top: 0;
   right: 0;
   display: inline-block;
   width: 4em;
   height: 4em;
}

.s-sidebar__nav-link > i::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


   .s-layout__content {
      margin-right: 4em;
   }
   
   /* Sidebar */
   .s-sidebar__trigger {
      width: 4em;
   }
   
   .s-sidebar__nav {
      width: 4em;
      right: 0;
   }
   
   .s-sidebar__nav:hover,
   .s-sidebar__nav:focus,
   .s-sidebar__trigger:hover + .s-sidebar__nav,
   .s-sidebar__trigger:focus + .s-sidebar__nav {
      width: 15em;
   }

.filler {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #192b3c;
  height: 64px;
  width: 100%;
 }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="s-layout">
<!-- Sidebar -->
<div class="s-layout__sidebar">
  <a class="s-sidebar__trigger" href="#0">
     <i class="fa fa-bars"></i>
  </a>

  <nav class="s-sidebar__nav">
     <ul>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-home"></i><em>Home</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
             <i class="fa fa-user"></i><em>My Profile</em>
           </a>
        </li>
        <li>
           <a class="s-sidebar__nav-link" href="#0">
              <i class="fa fa-camera"></i><em>Camera</em>
           </a>
        </li>
     </ul>
  </nav>
</div>

<!-- Content -->
<main class="s-layout__content">
  <div class="filler"></div>
  <h1>Full View, Please!</h1>
</main>
</div>

相关问题
最新问题