1. 首頁
  2. 問答
  3. CSS流體表單錯誤

CSS流體表單錯誤

2013-10-23 39 views
1

試圖創建一個基於流體css的表單。但是，它不能正常工作。請參閱css。當我縮小屏幕時，輸入不會相應地縮短。我玩過不同大小的遊戲，但它的運行不正常。CSS流體表單錯誤

謝謝。

/* ----------- Form ----------- */ 
.myform 
{ 
width: 60%; 
padding: 0.5em; 
margin: 1em auto; 
} 

/* ----------- stylized form ----------- */ 
.floatRight 
{ 
width: 50%; 
float: right; 
} 

.floatLeft 
{ 
width: 50%; 
float: left; 
clear: left; 
} 

.floatCenter 
{ 
width: 100%; /* width of box - padding */ 
float: left; 
clear: both; 
text-align: center; 
display: inline-block; 
} 

#stylized h1 { 
font-size:1em; 
font-weight:bold; 
margin-bottom:0.5em; 
} 

.spacer 
{ 
clear: both; 
height: 1px; 
} 
#stylized 
{ 
border: solid 2px #b7ddf2; 
background: #ebf4fb; 
} 
#stylized p 
{ 
font-size: 1em; 
color: #666666; 
margin-bottom: 1em; 
padding-top: 8px; 
padding-bottom: 20px; 
} 
#stylized label 
{ 
display: block; 
font-weight: bold; 
width: 140px; 
float: left; 
} 
#stylized .inputClass 
{ 
float: left; 
font-size: 12px; 
padding: 4px 2px; 
border: solid 1px #aacfe4; 
width: 200px; 
margin: 2px 0 20px 10px; 
text-transform:uppercase; /* client-req */ 
} 

#stylized .noDisplay 
{ 
display: none;  
} 

#stylized .text-box 
{ 
float: left; 
font-size: 12px; 
padding: 4px 2px; 
border: solid 1px #aacfe4; 
width: 200px; 
margin: 2px 0 20px 10px; 
text-transform:uppercase; /* client-req */ 
} 

#stylized .check-box 
{ 
float: left; 
font-size: 85%; 
padding: 0.250em 0.125em; 
border: solid 0.063em #aacfe4; 
width: 12.50em; 
margin: 0.125em 0 1.250em 0.625em; 
} 

#displayErrors 
{ 
float: left; 
display: block;   
color: #060;   
font-size: 85%;   

font-style: normal;   
text-transform: uppercase; 
padding: 0 0 0.625em 0; 
}

HTML是

<div id="stylized" class="myform"> 
    <ul> 
     <li><span class="field-validation-valid" data-valmsg-for="MessageEnquiryCode" data-valmsg-replace="true"></span> </li> 
     <li><span class="field-validation-valid" data-valmsg-for="StandardMessageCode" data-valmsg-replace="true"></span> </li> 
     <li><span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="WorkPhoneNumber" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="MessageDateTime" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="MessageTypeCode" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span></li> 
     <li><span class="field-validation-valid" data-valmsg-for="MessageDateTime" data-valmsg-replace="true"></span></li> 
    </ul> 
    <p> 
     <label for="FromUserCode">From User :</label><label for="FromUserCode">Administrator</label> 
    </p> 
    <div class="floatLeft"> 
     <label for="MessageDateTime">Message Date :</label> 
     <input disabled="" class="inputClass hasDatepicker" data-val="true" data-val-required="The Message Date : field is required." id="MessageDateTime" name="MessageDateTime" value="23/10/2013 4:02:12 PM" type="text"> 
     <input id="MessageDateTime" name="MessageDateTime" value="23/10/2013 4:02:12 PM" type="hidden"> 

     <label for="ToUserCode">To User :</label> 
     <select class="inputClass" data-val="true" data-val-required="To User Required" id="ToUserCode" name="ToUserCode"><option value="">--SELECT USER--</option> 
<option value="ausadmin">Administrator</option> 
<option value="Darren">Darren McKwon</option> 
<option value="johnh">John Howard</option> 
<option value="Marilyn">Mariyn Sorensen</option> 
<option value="OFF">OFF</option> 
<option value="pm1">PM Name1</option> 
<option value="pm2">PM Name2</option> 
<option value="PM3">PN Name3</option> 
<option value="STUART BARLOW">ausadmin</option> 
</select> 
     <input id="ToUserCode" name="ToUserCode" value="" type="hidden"> 

     <label for="MessageTypeCode">Message Type Code :</label> 
     <select class="inputClass" id="MessageTypeCode" name="MessageTypeCode" onchange="MessageTypeCode_SelectedIndexChanged();"><option value="">--SELECT MESSAGE TYPE--</option> 
<option value="PER">PER</option> 
<option value="PMREP">PMREP</option> 
<option value="SALES">SALES</option> 
</select> 
     <input id="MessageTypeCode" name="MessageTypeCode" value="" type="hidden"> 

     <label id="lblMessageTypeDescription" class="noDisplay"> 
         Message Type Description :</label> 
     <textarea class="inputClass noDisplay" cols="20" disabled="True" id="MessageTypeDescription" name="MessageTypeDescription" rows="2"></textarea> 

     <label id="lblNoticeToAll" class="noDisplay"> 
         Notice To All :</label> 
     <input class="check-box noDisplay" data-val="true" data-val-required="The Notice To All : field is required." disabled="True" id="NoticeToAll" name="NoticeToAll" value="true" type="checkbox"><input name="NoticeToAll" value="false" type="hidden"> 

     <label for="MessageEnquiryCode">Message Enquiry Code :</label> 
     <select class="inputClass" id="MessageEnquiryCode" name="MessageEnquiryCode"> 
<option value="">--SELECT ENQUIRY TYPE--</option> 
<option value="ESC_TST">ESC_TST</option> 
<option value="ESC001">ESC001</option> 
<option value="ESC002">ESC002</option> 
<option value="sdfs">sdfs</option> 
<option value="SMH">SMH</option> 
</select> 
     <input id="MessageEnquiryCode" name="MessageEnquiryCode" value="" type="hidden"> 

     <label for="StandardMessageCode">Standard Message Code :</label> 
     <select class="inputClass" id="StandardMessageCode" name="StandardMessageCode" onchange="StandardMessage_SelectedIndexChanged();"><option value="">--SELECT STANDARD MESSAGE TYPE--</option> 
<option value="CALLHOME">CALLHOME</option> 
<option value="kaka">kaka</option> 
<option value="test">test</option> 
</select> 
     <input id="StandardMessageCode" name="StandardMessageCode" value="" type="hidden"> 

<label for="Ractive">Hide :</label> 
     <input disabled="" class="check-box" data-val="true" data-val-required="The Hide : field is required." id="Ractive" name="Ractive" value="true" type="checkbox"><input name="Ractive" value="false" type="hidden"> 
     <input id="Ractive" name="Ractive" value="False" type="hidden"> 
    </div> 
    <div class="floatRight"> 
     <label for="FirstName">First Name :</label> 
     <input class="text-box single-line" data-val="true" data-val-length="The field First Name : must be a string with a maximum length of 50." data-val-length-max="50" id="FirstName" name="FirstName" value="" type="text"> 
     <input id="FirstName" name="FirstName" value="" type="hidden"> 

     <label for="LastName">Last Name :</label> 
     <input class="text-box single-line" data-val="true" data-val-length="The field Last Name : must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="Last Name Required" id="LastName" name="LastName" value="" type="text"> 
     <input id="LastName" name="LastName" value="" type="hidden"> 

     <label for="WorkPhoneNumber">Working/Office Phone Number :</label> 
     <input class="text-box single-line" data-val="true" data-val-length="The field Working/Office Phone Number : must be a string with a maximum length of 25." data-val-length-max="25" id="WorkPhoneNumber" name="WorkPhoneNumber" value="" type="text"> 
     <input id="WorkPhoneNumber" name="WorkPhoneNumber" value="" type="hidden"> 

     <label for="HomePhoneNumber">Home Phone Number :</label> 
     <input class="text-box single-line" data-val="true" data-val-length="The field Home Phone Number : must be a string with a maximum length of 25." data-val-length-max="25" id="HomePhoneNumber" name="HomePhoneNumber" value="" type="text"> 
     <input id="HomePhoneNumber" name="HomePhoneNumber" value="" type="hidden"> 

     <label for="EmailAddress">Email Address :</label> 
     <input class="text-box single-line" data-val="true" data-val-length="The field Email Address : must be a string with a maximum length of 50." data-val-length-max="50" data-val-regex="Please Enter valid email which contains the @ Sign" data-val-regex-pattern=".+\@.+\..+" id="EmailAddress" name="EmailAddress" value="" type="text"> 
     <input id="EmailAddress" name="EmailAddress" value="" type="hidden"> 

     <label for="Message">Message :</label> 
     <textarea class="inputClass" cols="20" data-val="true" data-val-required="Message Required" id="Message" name="Message" rows="2"></textarea> 
     <input id="Message" name="Message" value="" type="hidden"> 

     <label for="RNotes">Remarks :</label> 
     <textarea class="text-box multi-line" data-val="true" data-val-length="The field Remarks : must be a string with a maximum length of 250." data-val-length-max="250" id="RNotes" name="RNotes"></textarea> 
     <input id="RNotes" name="RNotes" value="" type="hidden"> 
    </div> 
    <div style="display: none"> 
     <input data-val="true" data-val-required="The EditMessage field is required." id="EditMessage" name="EditMessage" value="False" type="hidden"> 
    </div> 
    <div class="floatCenter"> 
     <input value="Save" name="btnSave" class="button_small" type="submit">     
    <input value="Cancel" onclick="fn_CanelOperation();" class="button_small" type="button"> 
    </div> 

    <div class="spacer"> 
    </div> 
</div>

來源

2013-10-23 user2909840

+1

看看這個媒體查詢 –

+0

什麼是媒體查詢？ – user2909840

+0

它的一個簡單的谷歌搜索... https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 它創建您的CSS中不同的屏幕尺寸 –

回答

1

好友，

üř使用在像素寬度，U SHLD使用％值。如果你會px你frm不能響應..所以使用vrythng在％，而不是px。

斯賓塞提供的解決方案很酷，只是刪除最小寬度250px將使你的形式100％液體。

來源

2013-10-23 09:50:32

0

我能在今天下午完成這個給你，這裏是的jsfiddle：CLICK HERE

我改變了一些容器中的元素.formheader, .leftcol, .rightcol, .formfooter只是使它更容易理解流程。

當我對web元素進行標記時，我喜歡遵循的一條經驗法則是從帶有邊框的骨骼結構（包含div）開始，以便於識別。

來源

2013-10-23 22:48:56

+0

感謝您分享寶貴的技巧。 – user2909840

相關問題

 相關問題