在困難CSS樣式形式

與所有的爭議周邊表爲形式的佈局選項，我決定去與一個無序列表。我終於將標籤和元素顯示爲我的意圖，但是我添加的'note'div拒絕與上面的輸入對齊。在困難CSS樣式形式

我已經包含下面的代碼，請原諒我選擇幫我判斷放置扎眼的背景顏色！有沒有人有任何建議，爲什麼這個'筆記'div拒絕玩？我確定有一個簡單的解決方案，但我完全陷入了困境。非常感謝你提前。

form.contact label 
{ 
    float: left; 
    position: absolute; 
    background: red; 
} 
form.contact input 
{ 
    width: 200px; 
    margin-left: 15em; 
} 
form.contact .note 
{ 
    margin-left: 15em; 
    width: 176px; 
    background: yellow; 
} 
form.contact ul 
{ 
    list-style: none; 
    position: absolute; 
    padding: 0; 
} 
form.contact ul li 
{ 
    float: left;  
    clear: left;  
    width: 100%;  
    padding-bottom: 1em; 
    margin-bottom: 10px; 
    background: pink; 
    left: 0; 
} 

<ul> 
     <li> 
      <label for="address1">Address Line 1:</label> 
      <input name="address1" type="text" id="address1" /> 
     </li> 
     <li> 
      <label for="address2">Address Line 2:</label> 

      <input name="address2" type="text" id="address2" /> 
     </li> 
     <li> 
      <label for="address3">Address Line 3:</label> 
      <input name="address3" type="text" id="address3" /> 
     </li> 
     <li> 
      <label for="address4">Address Line 4:</label> 
      <input name="address4" type="text" id="address4" /> 
      <div class="note">This is a note</div> 

     </li> 

     <li> 
      <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" /> 
     </li> 
    </ul>

來源

2010-12-01 Jonathan

你忘了包括`<形式類=「接觸」>`開始標記和在HTML代碼片段中的``結束標記。 – Finbarr 2010-12-01 13:24:10

有關表格的佈局沒有爭議。它只是沒有完成，期間。 – Rob 2010-12-01 13:48:37

我知道表格在佈局方面是一個明確的禁忌。然而，我已經讀過，表格仍然是列表數據的合乎邏輯的選項 - 不管表格是否屬於灰色區域。 – Jonathan 2010-12-01 14:21:02

由於input和div具有默認不同的字體大小，和使用彈性佈局em測量由字體的大小的影響。

這修復它：

* {font-size: 12px;}

來源

2010-12-01 13:17:52 Finbarr

輸入是內嵌元件和div.note是塊狀元件。瀏覽器的默認CSS有內聯元素和div.notes的不同設置。我建議您嘗試調整magin-left和/或padding-left輸入和.note的值。 Finbarr指出，您可能還需要確認font-size。

來源

2010-12-01 13:20:59 weakish

一對夫婦的答案映入腦海。首先，您是否考慮過defualt填充？我看到你指定了邊距，但是如果你沒有包含一個固定的填充級別，不同的元素可能會以不同的方式繼承它。

如果您可以發佈屏幕截圖也會有所幫助 - 您提供的示例代碼適用於我，當我在konqueror中測試它時，它可能是瀏覽器問題？

...好，我看到weakish已經表示，幾乎同樣的事情，我打字這一段時間。但是，我的截圖評論立場;正如你所看到的那樣，準確地看到錯誤是什麼會有幫助。

來源

2010-12-01 13:26:09 Benubird

在困難CSS樣式形式

回答

相關問題