使用浮动和表单

Question

我已经为我创建的网站设置了一些高级表单的自定义css，但无论我采用哪种方式，标签和字段都不能无缝地浮动左边。

This is the page及以下是重力形式格式的css

.gform_wrapper ul li.gfield.gsection {
    clear: both;
    width: 100%;
    margin-top:1.4em;
}
.gform_wrapper ul li.gfield { 
    clear: none!important;
}

.entry-content .gform_fields li { 
    margin-right: .8em;
    float: left!important;
    margin: .5em;
}

.gfield.full-width {
    //border: 1px solid blue;
    width: 100%!important;  
    display: block;
}

.ginput_container input {
    height: 2em;
    width: 100% !important;
}

div.gform_wrapper input[type="email"], div.gform_wrapper input[type="text"], div.gform_wrapper textarea, div.gform_wrapper .ginput_complex label {
    padding: 0 0 0 .5em;
}

.gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield div.ginput_complex span.ginput_left select, .gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield div.ginput_complex span.ginput_right select, .gform_wrapper.gf_browser_gecko ul.gform_fields li.gfield select {
    width: 100%;
}

我在手机的媒体查询中有一些移动样式，但是平板电脑在桌面上看起来并不像我喜欢的那样好。

当我稍微调整窗口大小时，您可以看到下面的屏幕截图。

我只是希望.gform_fields li正确向左浮动，这样如果该行上没有任何空间在下一行上一直向左浮动，而不是向右显示下面的线。

如果有人能提供一些见解，那就是让这些字段随时向左浮动的最佳方式，我们将不胜感激！

Answer 1

从我看到的（如果我理解正确的话），向左浮动这实际上不是问题。真正的问题是下拉列表比文本字段高5个像素。

因此，如果你设置gfield的最小高度（例如：71px，即li的{​​{1}}框的高度），问题就解决了：

select

日历图标仍有问题需要修复。也许你可以用.gform_wrapper ul li.gfield { clear: none!important; min-height:71px; } 之类的东西阻止这一新行。但这需要一些测试。

我希望它有所帮助。祝你好运！

Answer 2

事实证明，正如Monty82已经说明的那样，我需要一个最小高度的li元素，但是我们都没有选择正确的名称

.entry-content .gform_fields li {
    **min-height: 90px !important;**
    margin-right: .8em;
    float: left!important;
    margin: .5em;
}

至于日期选择器，我设置了100％ALL LI字段的显式宽度，超过写入80％宽度我给出了date-picker-li字段。 CSS是一种级联风格（所以经过一些测试）我意识到如果我有这样的类

.ginput_container input {
    height: 2em;
    width: 100%;
}

.gform_wrapper input.datepicker.datepicker_with_icon {
    width: 80% !important;  
}

效果很好！