0

我有下面的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;
}
  1. 如果我将宽度 25% 设置为等于类，宽度 100% 设置为效果类，则所有表单元素都会相互粘连。
  2. 想知道我应该有什么样的 CSS 设置，这样即使在将效果类设置为 100% 之后，两个元素之间也有空格。（记住：效果类适用于所有表单元素）
  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 回答