形式搞亂了網頁的佈局

我開始了一個網頁，但是我遇到了問題。我添加了一些包含一些信息的表單以啓動登錄表單。我嘗試在表單中添加邊距和填充，但仍然完全搞砸了。這裏是搞砸區域的代碼和表單。形式搞亂了網頁的佈局

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;"> 
    <div style="width:20%;display:inline-block;text-align:left;border: 2px green solid;"></div> 
    <div id="paddingLeft" style="width:4%;display:inline-block"></div> 
    <div style="display:inline-block; width: 50%;"></div> 
    <div id="paddingRight" style="width:4%;display:inline-block"></div> 
    <div id="loginTitle" style="display:inline-block; width: 20%;border:2px green solid;text-align:center;" class="style1">Login</div> 

    <div style="width:20%;display:inline-block;text-align:left;height:100px;border: 2px green solid;"></div> 
    <div id="paddingLeft2" style="width:4%;display:inline-block;height:100px;"></div> 
    <div style="display:inline-block; width: 50%;height:100px;"></div> 
    <div id="paddingRight2" style="width:4%;display:inline-block;height:100px;"></div> 
    <div id="loginFormArea" style="display:inline-block; width: 20%;height:100px;border:2px green solid;text-align:center;"> 
     <form method="get" id="loginForm" style="height: 100%;padding:2px"> 
      <span class="style1" id="Username" style="display:inline-block; width:40%;">Username:</span> 
      <input id="usernameInput" name="Text1" type="text" style="width:40%;display:inline-block;margin-top: 5px;height:15px" /> 
     </form> 
    </div> 
</div>

來源

2013-06-29 TheQuantumBros

我建議你使用CSS文件來編輯css內聯只是更多的工作... – Sergio

我確實有一個用於主佈局的CSS文件，我喜歡將所有內容都設置爲內聯，它在一個CSS文件，所以我不會忘記是否好 – TheQuantumBros

你的佈局有點混亂，很難給出答案，並知道你想要什麼...檢查這一點，讓我知道這裏有什麼問題。我添加了您在右側/ css中看到的內容。從那裏可能更容易給出答案。 http://jsfiddle.net/D84jt/ – Sergio

試試這個：而不是

<div id="bodywrapper" style="width:100%;height:1000px;margin-top: 5px;">

：

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">

我的建議是：

不叫格「體」的ID。 body是html中的一個結構元素。
刪除左右邊距。你已經說它應該是寬度：100％，所以在這方面增加利潤率是不可預測的。如果需要，您可以添加填充。這可能有你正在尋找的效果。

來源

2013-06-29 19:12:23 Sergio

這並沒有改變左側部分的頂部dix和左側部分的底部div之間的差距 – TheQuantumBros

但是該div與' class =「bodyDiv Titles」'沒有高度定義。所以左邊的div是空的，沒有文本使它變得「小」。正確的div是相等的，但裏面有文字：'

' – Sergio

所以一旦我添加文本，它應該平平？ – TheQuantumBros

形式搞亂了網頁的佈局

回答

相關問題