Question

希望将段落内容与侧面导航右侧的margin: 0 auto div相对应，但是当我使用$(document).ready(function(){ var navElement = $('.nav-el'); $('.content-area').hide(); navElement.find('a').on('click', function(e){ e.preventDefault(); navElement.find('.current').removeClass('current'); $(this).addClass('current'); $(this.hash).show().siblings().hide(); }).first().click(); });时，没有任何反应。我知道我可能写错了CSS，但我不确定如何解决它。我也想要点击的链接的白色背景跨越持有导航的div的整行。我没有到达最左边。

.hide {
display: none;
}
body {

}
.container {
position: relative;
}

#contentBox {
border: 1px solid grey;
width: 960px;
height: 1000px;
border-radius: 5px;
margin: 0 auto;

}
.side-nav {
position: relative;
float: left;
width: 250px;
background-color: green;
height: 100%;
}
.nav-el {
margin: 0;
}
.nav-el a {
  text-decoration: none;
  display: block;
  padding: .5em 1em;
}
.nav-el a.current {
  background: white;
  color: orange;
}
.nav-el li {
list-style-type: none;
}
.main-content {

}
.content-area {
  padding: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/samplestyle.css">
</head>
<body>
  <div class="container">
    <div id="contentBox">
      <nav class="side-nav">
        <ul class="nav-el">
          <li><a href="#nav1">nav element 1</a></li>
          <li><a href="#nav2">nav element 2</a></li>
          <li><a href="#nav3">nav element 3</a></li>
          <li><a href="#nav4">nav element 4</a></li>
          <li><a href="#nav5">nav element 5</a></li>
        </ul>
        
      </nav>
      <div class="main-content">
        <div id="nav1" class="content-area active">
          <h2>SECTION 1</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id quam eget risus vulputate 
            posuere. Duis rhoncus nunc nec quam consequat cursus. Quisque aliquam arcu sed nibh suscipit 
            hendrerit. Integer nisi massa, venenatis id bibendum gravida, consequat sit amet elit. Nulla 
            rutrum, lectus ut fermentum vehicula, leo sem cursus libero, ut euismod velit turpis at sapien. 
            Donec dui tellus, convallis non egestas lobortis, sodales nec massa. Vivamus sit amet viverra 
            odio. Sed eget egestas libero, nec condimentum orci.
          </p>        
        </div>
        <div id="nav2" class="content-area">
          <h2>SECTION 2</h2>
          <p>
            Vestibulum gravida quam id sem sagittis, vel ornare sapien ultrices. Morbi iaculis placerat metus, 
            in placerat neque ultrices eu. Duis laoreet, quam ac commodo hendrerit, nisi dolor bibendum urna, 
            eu facilisis orci eros ac odio. Fusce porta eros tristique, pellentesque mauris in, ullamcorper nisl.
            Morbi sollicitudin in magna vel tempor. Nullam placerat lorem quis orci dapibus efficitur. Mauris 
            tincidunt nisl ac sem dictum tempor. Etiam a molestie lorem. Cum sociis natoque penatibus et magnis 
            dis parturient montes, nascetur ridiculus mus. In fringilla ipsum id nisi ultricies, ac ornare urna pharetra.
          </p>
        </div>
        <div id="nav3" class="content-area">
          <h2>SECTION 3</h2>
          <p>
            Vestibulum gravida quam id sem sagittis, vel ornare sapien ultrices. Morbi iaculis placerat metus, in placerat 
            neque ultrices eu. Duis laoreet, quam ac commodo hendrerit, nisi dolor bibendum urna, eu facilisis orci eros ac 
            odio. Fusce porta eros tristique, pellentesque mauris in, ullamcorper nisl. Morbi sollicitudin in magna vel tempor. 
            Nullam placerat lorem quis orci dapibus efficitur. Mauris tincidunt nisl ac sem dictum tempor. Etiam a molestie lorem. 
            Cum sociis natoque penatibus et magnis dis parturient montes, 
            nascetur ridiculus mus. In fringilla ipsum id nisi ultricies, ac ornare urna pharetra.
          </p>    
        </div>
        <div id="nav4" class="content-area">
          <h2>SECTION 4</h2>
          <p>
            Sed tempor sodales molestie. Integer nec mauris varius, scelerisque turpis sagittis, tincidunt tellus. Ut vehicula 
            nec urna eu malesuada. Donec nec lacinia mauris. Sed elit mauris, vulputate nec tortor ut, ornare auctor nisl. Cras 
            a lorem nunc. Praesent vitae lorem velit. Proin tempus felis sed tortor luctus feugiat. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur feugiat interdum orci et varius.
          </p>
        </div>
        <div id="nav5" class="content-area">
          <h2>SECTION 5</h2>
          <p></p> 
        </div>
      </div>
    </div> 
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

{{1}}

Answer 1

如果您在控制台中查看，则段落居中。只是你的菜单隐藏了它，所以你实际上看不到它。

要使我认为您想要做的文字居中，您可以在text-align: center;上使用.main-content：

.main-content {
  padding: 50px;
  text-align: center;
}

我还建议你在这里添加一些填充，使其更具可读性和不那么难看。

要允许链接拉伸全宽，您需要删除ul的填充：

ul {
  padding: 0;
}

侧导航造型问题

1 个答案: