0

私はhtmlとcss用に以下のコードを持っています、

My formcontainer width is : 740px;
form width is width:100%;

等しいクラスでは、4 つの div を 1 行に配置しました。

.equal {
    float:left;
    width:24.9%;
}

すべてのフォーム要素に効果クラスを適用し、

.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
  1. 幅 25% を等級クラスに設定し、幅 100% を効果クラスに設定すると、すべてのフォーム要素が互いにくっつきます。
  2. 効果クラスを 100% に設定した後でも、2 つの要素の間にスペースが残るように、どのようなオフ CSS 設定が必要かを知りたいです。(覚えておいてください: 効果クラスはすべてのフォーム要素に適用されます)
  3. また、テキストボックス名にクラス効果を適用すると、テキストボックスがフォームから外れます。

私のJSFiddle

JSFiddle

        <div class="formcontainer">
    <form id="personal_details" name="personal_details">
        <fieldset class="border">
            <legend>Details</legend>
            <fieldset class="no_border">
                <div class="equal">
                    <label>City</label>
                    <br />
                    <select class="effect" name="city" id="city" style="width:90%">
                        <option>Select</option>
                        <option>Bhubhaneshwar</option>
                    </select><span id="cityInfo">Valid City</span>

                </div>
                <div class="equal">
                    <label>State</label>
                    <br />
                    <select class="effect" name="state" id="state" style="width:90%">
                        <option>Select</option>
                        <option>Jammu & Kashmir</option>
                    </select> <span id="stateInfo">Valid State</span>

                </div>
                <div class="equal">
                    <label>Country</label>
                    <br />
                    <select class="effect" name="country" id="country" style="width:90%">
                        <option>Select</option>
                        <option>India</option>
                    </select><span id="countryInfo">Valid Country</span>

                </div>
                <div class="equal">
                    <label>Pincode.</label>
                    <br />
                    <input type="text" name="pincode" id="pincode" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>

                </div>
            </fieldset>
            <fieldset class="no_border">
                <div>
                    <label>Name.</label>
                    <br />
                    <input type="text" name="name" id="name" class="effect" style="width:90%" maxlength="6" /><span id="pincodeInfo">Valid Pincode please</span>

                </div>
            </fieldset>
        </fieldset>
    </form>
</div>

CSS

.formcontainer {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 4px #ccc;
    -webkit-box-shadow: 0 0 4px #ccc;
    -moz-box-shadow: 0 0 4px #ccc;
    border:1px solid #ccc;
    padding:15px;
    width: 740px;
    margin:0 auto;
}
form {
    margin:0 auto;
    text-align:left;
    width:100%;
    background:#fff;
    font-family:Calibri;
    height: auto;
}
.effect {
    border:1px solid #ccc;
    height: 20px;
    padding:3px;
    width:97%;
    font-size:14px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.equal {
    float:left;
    width:24.9%;
}
#personal_details span {
    margin-left: 50px;
    color: #b1b1b1;
    font-size: 11px;
    font-style: italic;
    margin: 0 auto;
    display:none;
}
fieldset.no_border {
    overflow:hidden;
    border:0;
    padding:0 0 10px 0;
    margin:0;
}
fieldset.border {
    overflow:hidden;
    border:1;
    -moz-border-radius:5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:3px 0;
    padding:10px;
    border:solid 1px #ACACAC;
}
4

1 に答える 1

0

私はあなたのフィドルを見て、25% を CSS の幅に適用し.equal、幅を.effect100% にすると何も変わっていないようです。あなたが述べたように、それはすべてうまく機能しているようで、くっついていません。フィドルが目的のパーセンテージで正常に動作しているように見えるため、あなたが直面している問題についてはわかりません。

于 2013-08-08T06:45:19.397 に答える