在css中显示垂直线

Question

我想在div标签中显示垂直线。我有一个div标签，并将其命名为rest。 在这里我有两个div标签（sidemenu）一个是侧面菜单我标记为'sm'，并想绘制我在两个div标签之间以绿色绘制的线，我的第二个div是内容。我的问题是现在hr标签显示为点。

 .outer{
      margin-left:20%;
      margin-top:.5cm;
      margin-bottom:.5cm;
      height:750px;
         width:60%;
      box-shadow: 10px 10px 5px #888888;
	border:1px solid #f9f2f2;
	border-radius: 10px;
     }
.log{
   width:100%;
   height:50px;
   border:1px solid #f9f2f2;
   border-radius: 10px;
   background:-o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff) );
	background:-moz-linear-gradient( center top, #e5e3e3 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");	background: -o-linear-gradient(top,#e5e3e3,ffffff);

	background-color:#e5e3e3;
	border:0px solid #f9f2f2;
	text-align:left;
	border-width:0px 0px 1px 1px;
}
.rest{
height:685px;
 background:-o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff) ); 
	background:-moz-linear-gradient( center top, #e5e3e3 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");	background: -o-linear-gradient(top,#e5e3e3,ffffff);

	background-color:#e5e3e3;

	border:1px solid #f9f2f2;
	border-width:0px 0px 0px 0px;
	border-radius: 0px 0px 10px 10px;
	text-align:left;
	padding:7px;
}
.sidemenu{
float:left;
margin-top:150px;
  height:250px;
  width:150px;
     
	border:1px solid #f9f2f2;
	border-radius: 10px;
}
.content{
border-left: thick solid #f9f2f2;
}
hr{
margin:0;
width:1px;
height:685px;
}

 <div class="outer">
                <div class="log">
                
                </div> <!--End of log div -->
                <div class="rest">
                   <div class="sidemenu">
                        <div class="menu 1">
                        </div> <!--End of menu1 -->
                        <div class="menu 2">
                        </div> <!--End of menu 2-->
                        <div class="menu 3">
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   <hr  >
                   <div class="content">
                   </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->

Answer 1

＆＃13;

＆＃13;

.outer {
  margin-left: 20%;
  margin-top: .5cm;
  margin-bottom: .5cm;
  height: 737px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.log {
  width: 100%;
  height: 50px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 0px solid #f9f2f2;
  text-align: left;
  border-width: 0px 0px 1px 1px;
}
.rest {
  height: 685px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.sidemenu {
  float: left;
  margin-top: 150px;
  height: 250px;
  width: 150px;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
}
.content {
  border-left: thick solid #f9f2f2;
}
hr {
  margin: 0;
  width: 1px;
  height: 685px;
  background:red;
}

＆＃13;

<div class="outer">
  <div class="log">

  </div>
  <!--End of log div -->
  <div class="rest">
    <div class="sidemenu">
      <div class="menu 1">
      </div>
      <!--End of menu1 -->
      <div class="menu 2">
      </div>
      <!--End of menu 2-->
      <div class="menu 3">
      </div>
      <!--End of menu 3-->
      <div class="menu 4">
      </div>
      <!--End of menu 4-->
    </div>
    <!--End of side menu -->
    <hr>
    <div class="content">
    </div>
    <!--End of content -->
  </div>
  <!--End of rest div -->
</div>
<!--End of outer div-->

＆＃13;

＆＃13;

＆＃13;