Div標籤重疊在翡翠

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標籤重疊，請help.I嘗試溢出：隱藏和其他的東西，但沒有發生。我想要垂直放置這兩個div標籤。Div標籤重疊在翡翠

來源

2015-11-05 Karanbir Singh

誰迫使你使用玉器？如果玉器使事情變得複雜，那麼就用HTML去創造一些東西。 –

我只想試試 –

如果你有重疊，這幾乎肯定是CSS的問題。事實上，我認爲如果你剝離了所有的CSS（至少對於div），重疊問題將得到解決。儘管我不知道它應該看起來像什麼，但我無法對修復提出任何建議。基本設計圖或網頁預期外觀的模型的圖像將會很有幫助。否則，我會說在CSS中用'display'，'float'和'position'移除所有行將是解決問題的良好開端。 – Nuclearman

我有類似的問題。顯示：在其他重疊的div上的inline-block解決了我的問題。

來源

2016-09-07 05:13:53 ksan

Div標籤重疊在翡翠

回答

相關問題