以联系方式浮动表格

Question

我发现wordpress的contactform插件似乎很容易。它是一个免费的插件所以我相信作者不会介意我发布他的一些代码。我正在尝试将文本区域放在文本字段旁边。这里有一些奇怪的事情发生。当我使用负边距时，蓝色框在红色下面“消失”。

<div id="simple-contact-form">

http://jsfiddle.net/bald1/3c7WG/

Answer 1

为了使这项工作跨浏览器，您需要遵循css：

#simple-contact-form .right {
 float: right;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#simple-contact-form .right fieldset {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}


fieldset {
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

并且您需要将三个文本框包含在div中，并使用“right”类：

<div class="right">

        <fieldset class="scf-name">
            <label for="scf_name">Name (Required)</label>
            <input name="scf_name" id="scf_name" type="text" size="33" maxlength="99" value="" placeholder="Your name" />
        </fieldset>
        <fieldset class="scf-email">
            <label for="scf_email">Email (Required)</label>
            <input name="scf_email" id="scf_email" type="text" size="33" maxlength="99" value="" placeholder="Your email" />
        </fieldset>
        <fieldset class="scf-response">
            <label for="scf_response">1 + 1 =</label>
            <input name="scf_response" id="scf_response" type="text" size="33" maxlength="99" value="" placeholder="2" />
        </fieldset>

</div>

http://jsfiddle.net/3c7WG/8/