Html 我怎样才能使导航条向左浮动？

我需要知道如何将导航栏中的链接向左移动。不是文本，而是所有链接本身。就我个人而言，我不能把它做好。另外，我需要知道是否有办法只在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>

.sidebar1 a:链接{
背景色：#C1A4；
边界半径：15px；
边框：1px纯白；
显示：块；
背景尺寸：15px；
文字装饰：无；
宽度：200px；
填充物：5px 5px 5px 10px；
边缘底部：5px；
颜色：深绿色；
右边填充：20px；
字体系列：verdana；
字体大小：.9em；
}
.侧边栏1{
浮动：左；
宽度：20%；
填充：0 20px 0 20px；
背景：url（sidebar1background.jpg）；
背景重复：重复-y；
高度：1000px；

下面是JSFIDLE：

---

这就是如何仅在侧面设置阴影（示例）：

这是一个带有方框阴影的div元素
div{
宽度：200px；
高度：100px；
盒影：6px04px-4px#222，-6px04px-4px#222；
}

---

您的小提琴代码有点混乱，因此我用您要查找的宏部分制作了一个非常简单的新代码

你可以在这里找到它：

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

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

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

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

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

包含文本的内容部分

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

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

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

对于左侧和右侧的框阴影，我使用如下框阴影规则：

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

---

希望这能有所帮助。

将链接向左移动到底是什么意思？将链接一个接一个地移动到同一行上？因为在您的小提琴中，我已经看到

与左侧对齐。让我更新它，以便您可以看到整个内容。它们所在的侧边栏容器似乎与它们重叠。我尝试了填充、边距和浮动。…我想不出来。等一下，我会更新我的小提琴。小提琴已经更新了

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