CSS表單似乎沒有任何換行符

我正在處理我的網站表單樣式，並找到了一個似乎可以工作的教程...本教程包含具有懸停提示的代碼，此代碼導致事情變得醜陋。他們似乎不是將所有的田野都排成一排，而是試圖將自己的位置一個接一個地排列在窗戶下。CSS表單似乎沒有任何換行符

這裏是有問題，隨後由CSS功能的代碼元素...

HTML

<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>"> 
    <h3>Contact Form</h3> 

      <div class="field"> 
       <label for="hostess_fname">First Name:</label> 
       <input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" /> 
       <p class="hint">Enter your name.</p> 
      </div> 

      <div class="field"> 
       <label for="email">Last Name:</label> 
       <input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" /> 
       <p class="hint">Enter your email.</p> 
      </div> 
      <input type="submit" value="Lookup Hostess" /> 
<input type="hidden" name="Lookup" value="form2" />

CSS

#defaultform { 

width: 500px; 
padding: 20px; 
background: #f0f0f0; 
overflow:auto; 

/* Border style */ 
border: 1px solid #cccccc; 
-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
border-radius: 7px; 

/* Border Shadow */ 
-moz-box-shadow: 2px 2px 2px #cccccc; 
-webkit-box-shadow: 2px 2px 2px #cccccc; 
box-shadow: 2px 2px 2px #cccccc; 

} 

label { 
font-family: Arial, Verdana; 
text-shadow: 2px 2px 2px #ccc; 
display: block; 
float: left; 
font-weight: bold; 
margin-right:10px; 
text-align: right; 
width: 120px; 
line-height: 25px; 
font-size: 15px; 
} 

#defaultform.input{ 
font-family: Arial, Verdana; 
font-size: 15px; 
padding: 5px; 
border: 1px solid #b9bdc1; 
width: 300px; 
color: #797979; 
} 

.hint{ 
display: none; 
} 

.field:hover .hint { 
position: absolute; 
display: block; 
margin: -30px 0 0 455px; 
color: #FFFFFF; 
padding: 7px 10px; 
background: rgba(0, 0, 0, 0.6); 

-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
border-radius: 7px; 
}

我剛剛更新的代碼與更多的HTML從較短的形式，我試着用相同的CSS。我還添加了更多的CSS代碼。我得到了同樣的行爲。我仍然困惑於選擇器，以及這些是如何定義和東西。

來源

2013-02-06 Scott Nipp

，你可以創建一個[的jsfiddle（http://www.jsfiddle.net）展示你的問題？因爲它[看起來工作正常]（http://jsfiddle.net/zgLNW/），除非我誤解你正在嘗試做什麼。 –

我明白你現在在做什麼，你已經添加了你的代碼。這是一個非常簡單的修復，但難以發現：

CSS

.field{ 
    clear:both; 
}

這裏的jsFiddle

來源

2013-02-06 03:41:21 symlink

CSS表單似乎沒有任何換行符

回答

相關問題