侧面导航样式问题
[英]Side Navigation styling issues
问题描述
Would like to center the paragraph content with respect to the .main-content div that is to the right of the side navigation, but when I use margin: 0 auto nothing happens. 
想要将段落内容相对于.main-content div .main-content在侧面导航的右侧，但是当我使用margin: 0 auto什么也没有发生。 I know I probably wrote the CSS wrong but I not sure of how to fix it.I would also like the white background of a link that's clicked to span the entire row of the div that holds the navigation. 我知道我写的CSS可能是错误的，但是我不确定如何解决它。我还希望单击链接的白色背景以跨越保存导航的div的整个行。 I doesn't reach the far left side. 我没有到达最左边。
$(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(); });
.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 个解决方案
解决方案1
0 2015-07-08 20:18:37
The paragraph is centered if you look in the console. 如果您在控制台中查看，该段落将居中。 It's just that you menu hides it so you can't actually see it. 只是菜单隐藏了它，所以您实际上看不到它。
To center the text which is what I assume you want to do you can use text-align: center; 要使文本居中，这是我假设要执行的操作，可以使用text-align: center; on your .main-content : 在您的.main-content ：
.main-content {
padding: 50px;
text-align: center;
}
I'd also suggest you throw in some padding here to make it more readable and less ugly. 我还建议您在此处添加一些填充，以使其更具可读性和丑陋性。
To allow the link to stretch full width you need to remove the padding of the ul : 要允许链接拉伸全宽，您需要删除ul的填充：
ul {
padding: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.