Question

我正在尝试使用html和css创建表单。我的印象是我必须使用百分比而不是像素而且我在某种程度上。我正在使用最小宽度等。这最好用图片描述，所以我将在这里提供。

这是基本形式：

这是我操纵窗口大小的时候：

显然，我不希望我的徽标偏向一边，而且所有关于此处所描绘的地方。所以这是我尝试用div和输入字段的这个“联合”所涉及的逻辑来推理。

这是表单中涉及的html，它有一些手动样式，这就是我加入它的原因。

<div class="email-container">
    <h3 style="text-align: center; color: #3684FF">SEND ME AN EMAIL</h3>
    <form id="contact-form" action="//formspree.io/example@gmail.com" method="POST">
        <div class="form-group">
            <span class="icon-case" id="iname">
                <i class="fa fa-user" id="user"></i>
            </span>
            <input type="text" onfocus="chbgn('#3684FF');" onblur="outblurn();" id="name" name="name" placeholder="FULL NAME" style="width: 36%; max-width: 36%; margin-right: 7.5%;">
        </div>

        <div class="form-group">
            <span class="icon-case" id="iemail">
                <i class="fa fa-envelope" id="envelope"></i>
            </span>
            <input type="text" onfocus="chbge('#3684FF');" onblur="outblure();" id="email" name="email" placeholder="EMAIL ADDRESS" style="width: 36%; max-width: 37%;">
        </div>

        <div class="form-group">
            <span class="icon-case" id="isubj">
                <i class="fa fa-pencil" id="pencil"></i>
            </span>
            <input type="text" onfocus="chbgs('#3684FF');" onblur="outblurs();" id="subj" name="_subject" placeholder="SUBJECT" style="width: 90%; max-width: 90%; overflow: hidden;">
        </div>
        <textarea id="message" name="message" placeholder="SEND ME A MESSAGE . . ." style="height:150px; width:100%;"></textarea>

        <input type="submit" id="send" value="SUBMIT">
        <input type="hidden" name="_next" value="//example.com/thankyou.html" />
    </form>
</div>

以下是CSS用法：

.email-container {
    margin-bottom: 10%;
    background: #FFFFFF;
    min-height: 400px;
    overflow: hidden;
    padding: 2% 5%;
    border-radius: 5px;
}

.icon-case {
    width: 5%;
    min-width: 5%;
    float: left;
    border-radius: 5px 0px 0px 5px;
    background: #EEEEEE;
    height: 42px;
    text-align: center;
    line-height: 40px;
}

input[type=text] {
    border-radius: 0px 5px 5px 0px;
    border: 1px solid #EEEEEE;
    margin-bottom: 3%;
    height: 40px;
    float: left;
    padding: 0 15px;
}

textarea {
    padding: 15px;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    margin: 0;
    margin-bottom: 3%;
    box-sizing: border-box;
    resize: none;
    float: left;
}

input:focus,
textarea:focus {
    outline: none;
    border: 1px solid #3684FF;
}

input[type=submit] {
    padding: 8px 15px;
    border-radius: 5px;
    height: 37px;
    cursor: pointer;
    float: right;
    background-color: none;
    color: #3684FF;
    border: 1px solid #EEEEEE;
}

input[type=submit]:hover {
    background-color: #3684FF;
    color: #FFFFFF;
    border: none;
}

正如你所看到的那样，我试图寻找最小宽度/最大宽度，向左漂浮......等等。让这种方法干净地浓缩的秘诀是什么？这一切都发生在体内，身体宽度为60％。

Answer 1

你的CSS有一些问题，我可以快速浏览一下，但我不会详细说明，因为这不是我怎么做的：你是浮动图标和输入，以及既没有定位。这确保有问题。我也看不到表格组DIV的任何CSS。事实上，您的CSS选择器都没有定义display或position，只有图标有width。作为良好控制的起点，这些非常重要。

放置图标并确保它们“坚持”输入的更好方法是使输入跨越其表格组DIV的宽度，并将带有position: absolute;的图标放在输入中，对齐到左输入边缘。输入应该足够padding-left以补偿入侵图标。

我已经忘记了Bootstrap是如何做到的，但你可能想去他们的网站并检查他们的这种形式元素。他们的方法可能与我上面描述的不同。如果您遇到自己的问题，一个简单的选择就是使用Bootstrap。

统一div，以便调整窗口大小不会将它们分开

1 个答案: