[英]How can I float this Nav bar to the left?
I need to know how to move the links in the nav-bar to the left. 我需要知道如何将导航栏中的链接向左移动。 Not the text, but all of the links themselves.
不是文本,而是所有链接本身。 For the life of me, I can't get it right.
为了我的一生,我做对了。 Also, I need to know if there is a way to create a box shadow only to the left and right of a div.
另外,我需要知道是否有一种方法只能在div的左侧和右侧创建框阴影。 I'll upload my JSFiddle at the bottom, but as of right now here is my css and my html
我将在底部上传我的JSFiddle,但到目前为止,这里是我的CSS和HTML
.sidebar1 a:link{
background-color: #c1c1a4;
border-radius: 15px;
border:1px solid white;
display: block;
background-size: 15px;
text-decoration: none;
width: 200px;
padding: 5px 5px 5px 10px;
margin-bottom: 5px;
color: darkgreen;
padding-right: 20px;
font-family: verdana;
font-size: .9em;
}
.sidebar1{
float: left;
width: 20%;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
height: 1000px;
<div class="content">
<aside class="sidebar1">
<h4>Best Prime Time Shows</h4>
<ul>
<li><a href="#">Alice</a></li>
<li><a href="#">All In The Family</a></li>
<li><a href="#">Barney Miller</a></li>
<li><a href="#">Beverly Hillbillies</a></li>
<li><a href="#">Bewitched</a></li>
<li><a href="#">The Bob Newhart Show</a></li>
<li><a href="#">The Brady Bunch</a></li>
<li><a href="#">Gilligan's Island</a></li>
<li><a href="#">Good Times</a></li>
<li><a href="#">The Love Boat</a></li>
<li><a href="#">Mary Tyler Moore</a></li>
<li><a href="#">M*A*S*H</a></li>
<li><a href="#">Maude</a></li>
<li><a href="#">One Day At A Time</a></li>
<li><a href="#">Petticoat Junction</a></li>
<li><a href="#">Soap</a></li>
<li><a href="#">Taxi</a></li>
<li><a href="#">What's Happening</a></li>
<li><a href="#">Welcome Back Kotter</a></li>
<li><a href="#">WKRP In Cincinatti</a></li>
</ul>
</aside>
And here is the jsfiddle: https://jsfiddle.net/b6jh396e/#&togetherjs=iIHt8Oayte 这是jsfiddle: https ://jsfiddle.net/b6jh396e/#&togetherjs=iIHt8Oayte
This is how you can have the shadow only on the sides (example) : 这样,您就可以只在侧面有阴影(示例):
<div>This is a div element with a box-shadow</div>
div {
width: 200px;
height: 100px;
box-shadow: 6px 0 4px -4px #222 , -6px 0 4px -4px #222;
}
https://jsfiddle.net/r1sf3hnv/ https://jsfiddle.net/r1sf3hnv/
Your fiddle code was a bit confused, so I made a new very simple one with the macro sections you are looking for. 您的小提琴代码有些混乱,因此我使用了您要查找的宏部分,制作了一个非常简单的新代码。
You can find it here: http://jsfiddle.net/xL1o0Lrp/3/ 您可以在这里找到它: http : //jsfiddle.net/xL1o0Lrp/3/
You have to be careful with positioning and floating of the elements. 您必须小心放置和浮动元素。
In my fiddle there is a main container which takes up the 90% of the viewport width: 在我的小提琴中,有一个主容器占用了视口宽度的90%:
.main-container{
height:100vh;
width:90%;
margin:0 auto;
background:#ccc;
}
Inside the main container you can see 2 sections: 在主容器内,您可以看到2个部分:
The content section with the text 带有文本的内容部分
aside{ float:left; width:35%; } section{ float:left; width:65%; background:#ddd; }
Notice that the width percentage is based on the parent container width - in this case the .main-container and both are floating to left in order to be next to each other. 请注意,宽度百分比基于父容器的宽度-在这种情况下,.main-container和两者都向左浮动以便彼此相邻。
For the box-shadow on the left and on the right I used the box-shadow rule like this: 对于左侧和右侧的盒子阴影,我使用了如下盒子阴影规则:
/* shadow on all the 4 sides*/
box-shadow: 0 0 10px rgba(0,0,0,.25);
/* or if you want the shadow only on sides */
box-shadow: 10px 0 10px -5px rgba(0,0,0,.25) , -10px 0 10px -5px rgba(0,0,0,.25);
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.