Question

我有一个表单，其中有两个字段被切断，其中有一个overflow:hidden;我已经在Firebug上关闭但是这只适用于“输入密码”输入而不是“确认密码” “输入。任何人都可以追踪为什么它还在切断盒子？

这是link

Answer 1

标识为input_1_10_container的div（包含两个密码字段）正在使用overflow:hidden

进行剪切

Answer 2

错误发生在两行forms.css，206：

上

.gform_wrapper .field_name_first input, .gform_wrapper .ginput_complex .ginput_left input {
width: 93% !important;
}

和238：

.gform_wrapper .ginput_complex .ginput_right input, .gform_wrapper .ginput_complex .ginput_right select {
width: 90% !important;
}

将宽度设置为上面的宽度，它应该可以解决您的问题。

Answer 3

尝试减少两个输入的水平填充或宽度。将元素维度属性的百分比/绝对值混合

是一个相当不错的主意

Answer 4

相应调整宽度，如

.gform_wrapper .ginput_complex {
width: 614px;
}

Answer 5

.gform_wrapper .ginput_complex {overflow:hidden}

在你的CSS的第202行

有一个隐藏的溢出..转过来解决了这里的问题。我个人建议你减少两个字段的宽度，猜测它看起来会好一些并解决问题..只是一个想法..

Answer 6

删除溢出：隐藏.gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right, .gform_wrapper .ginput_complex .ginput_full并添加边距右：10px .gform_wrapper .ginput_complex .ginput_left

Answer 7

你甚至不需要两个跨度......

你可以这样做（这里是内联的，只需将其编码为css）

<div class="ginput_complex ginput_container" id="input_1_10_container">
   <input style="width: 45% !important; display:inline-block; margin-right:12px;"
          type="password"  placeholder="Enter Password" 
          name="input_10" id="input_1_10" value="" tabindex="5">      
   <label style="display: none;" for="input_1_10">Enter Password</label>

   <input style="width: 45% !important; display: inline-block;" 
          type="password"  placeholder="Confirm Password" name="input_10_2" 
          id="input_1_10_2" value="" tabindex="6">
   <label style="display: none;" for="input_1_10_2">Confirm Password</label>
</div>

也适用于文本的扩大。

尝试用Firebug代替你的div ...

Answer 8

此代码有效

.gform_body input,textarea,select {box-sizing:border-box !important;}

#input_1_10_1_container {width:48.5% !important;}
#input_1_10_2_container {width:48.5%;float:left}

CSS切断输入框的末尾

8 个答案: