如何使用css在表单中创建两列

时间:2014-08-05 05:59:35

标签: html css forms

我创建了wufoo表单,这是显示弹出窗体的链接,

custom.css:

#logo a {background-image:url('http://wufoo.com/images/themes/logos/shark.png'); min-height:0; height:40px}
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://wufoo.com/images/themes/logos/shark.png", sizingMethod="crop");
}

/* Backgrounds */
html{background-image:none;background-color:#99cc00}
#logo{background-image:none;background-color:#669900}
#container{background:#FFFFFF}
.wufoo input.text, .wufoo textarea.textarea{background:#FFFFFF url(/images/fieldbg.gif) repeat-x top}
.wufoo .focused{background:#FFF7C0}
.wufoo .instruct{background-color:#F5F5F5}

/* Borders */
#container{border:0 solid red}
.wufoo .info{border-bottom:1px dotted #000}
.wufoo .instruct{border:1px solid #e6e6e6}

/* Typography */
.wufoo .info h2{font-size:160%;font-family:inherit;color:#000000}
.wufoo .info div{font-size:95%;font-family:inherit;color:#444444}
.wufoo .section h3{font-size:110%;font-family:inherit;background:#FFFFFF;color:#000000}
.wufoo .section div{font-size:85%;font-family:inherit;color:#444444}
.wufoo label.desc, .wufoo legend.desc{font-size:95%;font-family:inherit;color:#444444}
.wufoo li div, .wufoo li div label, .wufoo li span label{font-family:inherit;color:#444444}
.wufoo input.text, .wufoo textarea.textarea, .wufoo select.select, .wufoo label.choice{font-size:100%;font-family:inherit;color:#333333}
.wufoo label.choice{color:#444444}
.wufoo .instruct{font-size:80%;font-family:inherit;color:#444444
}

HTML:

<a href="https://ss88.wufoo.com/forms/szmio4w0wn60jz/" onclick="window.open(this.href,  null, 'height=420, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Please fill out my form.</a>

在这种形式中,我想创建两列,我可以知道什么是CSS?

任何帮助都将不胜感激。

提前致谢..

1 个答案:

答案 0 :(得分:0)

See this example

希望这个帮助

   .wufoo {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }