css - 使用 float 和表单

Question

我已经为我正在创建的网站的高级表单设置了一些自定义 css，但是无论我采用哪种方式，标签和字段都不会在左侧无缝 float 。

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，即带有 select 框的 li 的高度)，问题就解决了:

.gform_wrapper ul li.gfield { 
    clear: none!important;
    min-height:71px;
}

日历图标仍有问题需要修复。也许您可以使用 white-space: nowrap 之类的内容来阻止换行。但这需要一些测试。

希望对你有所帮助。祝你好运!