Question

我需要知道如何将导航栏中的链接移到左侧。不是文本，而是所有链接本身。对于我的生活，我无法做到正确。此外，我需要知道是否有一种方法只在div的左侧和右侧创建一个盒子阴影。我会在底部上传我的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>

这是jsfiddle： https://jsfiddle.net/b6jh396e/#&togetherjs=iIHt8Oayte

Answer 1

这就是你只能在侧面使用阴影的方法（例子）：

<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/

Answer 2

你的小提琴代码有点混乱，所以我用你正在寻找的宏部分制作了一个非常简单的新代码。

您可以在此处找到它：http://jsfiddle.net/xL1o0Lrp/3/

您必须小心定位和浮动元素。

在我的小提琴中有一个主容器占据了视口宽度的90％：

.main-container{
  height:100vh;
  width:90%;
  margin:0 auto;
  background:#ccc;
}

在主容器内，您可以看到2个部分：

包含左对齐导航链接的旁边部分：

包含文字的内容部分

aside{
  float:left;
  width:35%;
}

section{
  float:left;
  width:65%;
  background:#ddd;
}

请注意，宽度百分比基于父容器宽度 - 在本例中为.main-container，两者都向左浮动，以便彼此相邻。

对于左侧和右侧的盒子阴影，我使用了盒子阴影规则，如下所示：

  /* 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);

希望有所帮助。

如何将此导航栏向左浮动？

2 个答案: