样式不正确 - 简单html表单中输入元素和按钮的对齐问题

Question

我正在尝试在我已经运行的网站中添加一个新的联系表单。

我下载了一个HTML片段并将其添加到我的页面中。这里是下载的代码。

代码是使用引导框架构建的。它看起来不错。但是当我在我的网站上实施它时，有些东西不适合一些地方。将概述上传元素。它不会保持时尚。按钮溢出了div。

我想正确对齐它们。有什么帮助吗？？

风格：

.contact-info h4 {
    color: #8F99A4;
    font-size: 1.6em;
    font-weight: 300;
    margin-top: 10px;
}
.contact-info h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6em;
    margin-top: 10px;
}
.contact-us {
    padding: 3em 0;
}

.HTML

<div class="col-md-6 contact">
                    <div class="contact-info">
                        <h4>Contact Us</h4>
                        <h3>FOR MORE INFORMATION</h3>
                        <div class="hril">
                            <div class="rounded-1">
                                <a href="#"><img src="images/rounded-2.png" class="img-responsive" alt=""/></a>
                            </div>
                            <form action=""  id="contactus" method="post" enctype="multipart/form-data">
                            <input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
                            <input name="phonenumber" style="width: 40%" type="number" class="text" required="required" placeholder="Phone Number"/>
                            <input name="frmemail" type="email" style="width: 40%"  class="text" placeholder="Email Id" required/>
                            <textarea name="comments" style="width: 80%" required="required" placeholder="Comments & Questions"></textarea>
                            <div>
                                <input placeholder="resume" type="file" style="width: 80%">
                            </div>
                            <input name="submit_button" type="submit" value="SEND" />
                            </br>
                            </form>
                        </div>
                    </div>
                </div>

Answer 1

除了评论中的建议外，对于表单，bootstrap 在此处有一个表单文档：引导表单文档。 你应该尝试一些类似的东西（给它你自己的维度和标准）：

<form class="form-horizontal">
  <div class="form-group">
    <label for="frmname" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input name="frmname" style="width: 80%" type="text" class="text" required="required" placeholder="Enter Your Full Name">
    </div>
  </div>
</form>

Answer 2

我不得不在css部分进行一些更改。

.hril{
    background-color:#F9F9F9;
    height: 400px;
    margin-top: 5em;
    position: absolute;
    border-radius: 5px;;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding-top: 5em;
}

将高度更改为 400px;这解决了按钮问题。

为输入文件元素添加了新样式。

input[type=file]
{
    width: 46%;
    font-weight: 400;
    padding: 10px;
    color: #A0A8B2;
    font-size: 14px;
    padding-left: 60px;
}

井。。。就是这样。问题解决了。