Div标签在Jade中重叠

时间:2015-11-05 09:45:49

标签: css node.js pug

Jade file
======
doctype html
html
  head
      title= title
      link(rel='stylesheet', href='/stylesheets/style.css')
  body
      div(id="topBar")
          h1(id="title") title
          form(id ="loginForm",name="input", action="html_form_action.asp", method="get", align="right")
               table
                    tr
                      td
                        key(for = "username") Username
                      td
                        input(id="username",type="text", name="user")
                      td
                        key(for="password") Password
                      td
                        input(id="password",type="password", name="pswd")
               input(type="submit", value="Login")
       div(id="content")
           h1(id="slogan") Slogan
 CSS File
 =========

 body {
      margin: 0;
      background-color: lightgrey;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

     }
 p {
    font-family: sans-serif;
   }
#topBar{
       top: 0;
      left: 0;
      position: absolute;
     width: 100%;
     background-color: darkcyan;
     color: white;

     }
     #title{
         margin-bottom: 2%;
          margin-right: 2%;
           margin-left: 5%;
          margin-top: 2%;
            float: left;
         display: inline;
        }
    #loginForm {
        float: right;
       position: relative;
        margin-bottom: 2%;
      margin-right: 2%;
     margin-left: 5%;
     margin-top: 2%;

      display: table;
      font-family: cursive;
   }
   #content{
       display: inline-block;
    }
     h1{

      font-family: cursive;
     }
   a {
   color: #00B7FF;
    }

嘿,我是Jade和节点js的初学者。我试图建立一个简单的登录页面。但我的div标签重叠请求帮助。我尝试溢出:隐藏和其他东西,但没有发生任何事情。我想垂直放置这两个div标签。

1 个答案:

答案 0 :(得分:1)

我有类似的问题。显示:div上的内联块被另一个重叠解决了我的问题。