Question

我有以下代码用于html和css，

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

在同等级别中，我将4个div放在一行中，

.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;
}

如果我将宽度25％设置为等于类和宽度100％以影响所有类表格元素互相支持。
想知道我应该拥有什么样的CSS设置，以便均匀将效果类设置为100％后，我之间留有空格两个要素。（请记住：效果类适用于所有形式元素）
此外，如果我将类效应应用于文本框名称，则文本框会消失形式。

我的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;
}

Answer 1

我已经看了你的小提琴，并且在.equal上应用25％宽度的CSS并且使.effect 100％的宽度似乎没有变化。这一切似乎都很好，并没有像你所说的那样粘在一起。我不确定你面临的问题是因为这个小提琴似乎运行得很好而且达到了理想的百分比。

需要CSS样式问题帮助

1 个答案: