1

试图创建一个基于 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>
4

2 回答 2

1

伙伴，

U r 使用 px 中的宽度，你应该使用 % 值。如果你将 px 你的 frm 不能响应.. 所以使用 vrythng 在 % 而不是 px。

Spencer 提供的解决方案很酷，只需删除 min-width 250px 将使您形成 100% 的液体。

于 2013-10-23T09:50:32.917 回答
0

今天下午我能够为你完成这个，这里是 JSFiddle： 点击这里

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

在标记我的 Web 元素时，我喜欢遵循的一条经验法则是从骨骼结构（包含 div 的）开始，并带有易于识别的边框。

于 2013-10-23T22:48:56.857 回答