Question

我想要删除hr tag以上的空间。现在我得到了一些不需要的空间。我想删除它。我想开始hr行，我标记为绿色。请看我上面编辑的问题。这是我的全身部分。

enter image description here

的CSS

 hr {
  margin: 0;
  width: 1px;
  height: 660px;
  border: 0;
  background: #fff;
  float: left;
 }
 .sidemenu {
 float: left;
 margin-top: 150px;
 width: 100%;
 }
.content {
 position:relative;
 }
.side{
width: 24%;
float: left;
display: inline-block;
}

HTML

  <div class="outer">
            <div class="log">
            <h1>Profile</h1>
                   <form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>

            </div> <!--End of log div -->
            <div class="rest">
              <div class="side">
               <div class="sidemenu">
                    <div class="1 menu">
                      <a href="admin_dashboard.php" class="astext">Profile</a>
                    </div> <!--End of menu1 -->
                    <div class="2 menu">
                      <a href="clients.php" class="astext">Clients</a>
                    </div> <!--End of menu 2-->
                    <div class="3 menu">
                      <a href="employees.php" class="astext">Employees</a>
                    </div> <!--End of menu 3-->
                    <div class="menu 4">
                    <a href="admin_file_view.php" class="astext">Documents</a>
                    </div> <!--End of menu 4-->
               </div> <!--End of side menu -->
               </div>  <!--End of side div -->
               <hr>
                <!--  <div class="heading" >
                     <h1>Profile</h1>
                  </div>    End of heading div -->
               <div class="content">

      </div> 

               </div> <!--End of content -->
            </div> <!--End of rest div -->
      </div> <!--End of outer div-->

Answer 1

删除属性margin-top，即margin-top: 150px; 来自你的班级边栏：
使用下面提到的课程：

.sidemenu {
 float: left;
 width: 100%;
 }

要将内容与中心对齐，请将以下CSS类添加到outer

.outer{
    margin-left:50%;
    width:100%;
}

您将看到所需的输出。

Answer 2

我假设你的HTML结构和CSS如下面的JS：

<div class="wrapper">
    <div class="sidemenu">
       left
    </div>
    <hr>
    <div class="container">
       right
    </div>
</div>

<强> DEMO 1

正如您所看到的，背景颜色不同。
外包装的填充使您的间距高于hr标记。

去除外包装的填充顶部/填充底部使用侧面菜单和内容中的填充。正如我在JS中使用的那样：

<强> DEMO 2

Answer 3

为外包装器隐藏溢出

删除hr标记上方的空格

3 个答案: