Question

我正在使用第三方工具[jotForm]在我的wordpress网站上创建表单，我注意到在Firfox中，所有文本框都在容器内部，而Chrome和IE正在执行。我在文本框上应用了100％的宽度，以便它们可以在任何分辨率下调整。

以下是不同浏览器的屏幕截图 enter image description here

以下是您可以在其中查看表单http://aite.com.sa/about/

的网址

另外，我为我的表单注入了自定义css

.form-textarea, .form-textbox {
    padding: 4px 0;
    border: solid 1px #AAA;
    outline: 0;
    font-size:12px !important;
    font-family: Verdana, Tahoma, sans-serif;
    background: #fff;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    width:100% !important;
    }
.form-textarea {
    height: 40px;
    line-height: 100%;
    font-family: verdana !important;
    }
input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
    }
.form-all{
    float:left;
    padding-top: 0px !important;
    width:100% !important;
    }
.form-input { width: 100%  !important; }
.form-line-error {background:none repeat scroll 0 0;}
.form-error-message { display: none !important; }
.form-label-left {
    display:none;
    }
.form-validation-error {border: 1px solid #C85959 !important;}
.form-button-error { color: #C85959;}

Answer 1

从列表项中删除填充并将其添加到列表中，因为它添加到100％宽度

.form-line {
    /* padding: 10px; remove this*/
}

.form-section, .form-section-closed {
    padding: 10px
}

Answer 2

由于您标记了CSS3，请查看大小调整框： http://www.paulirish.com/2012/box-sizing-border-box-ftw/

默认情况下，元素的总宽度包括：

给定宽度（在您的情况下为容器的100％）
border（如果你的边框是1px，总共加2px）
填充

例如：

div {
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

这个div比容器宽12px。将框大小添加到CSS：

div {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid black;
    padding: 5px;
}

如果你提供box-sizing：border-box，元素宽度将以不同方式计算，并将包含填充和边框。第二个div的总宽度为100％。

这是一个有效的例子： http://jsfiddle.net/7gW3R/

Answer 3

问题在你的标记中有几个级别。

输入是.form-input宽度的100％您的.form-input是li.form-line宽度的100％你的.form-line比你的表格宽

检查此LI

<li class="form-line form-line-error" id="id_3">
</li>

风格

.form-line {
    clear: both;
    padding: 10px;
    margin: 0px;
    display: block;
    width: 97%;
    width: -moz-available;
    position: relative;
}

边距和边距宽度通常添加到您定义的宽度，因此宽度：97％将被添加到每边10px的填充。你的李太宽了，孩子们正在填充它。

阅读盒子模型。有一个名为＆＃34; box-sizing＆＃34;您可以使用它来快速修复较新的浏览器，但从长远来看，正确理解盒子模型可以避免头痛。

Here's the official box-model page from the W3C

Here's Chris Coyier's more readable version

流体文本框超出容器

3 个答案: