样式不当 - 简单 html 形式的输入元素和按钮的对齐问题

Question

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

我下载了一个 HTML 片段并将其添加到我的页面。这里是 downloaded code.

代码是使用 bootstrap 框架构建的。这看起来不错的样子。但是当我将它应用到我的网站时，有些东西并不合适。上传元素被概述。它不会保持风格。而且按钮已经溢出了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 在这里有一个表单文档：Bootstrap form documentation。你应该尝试一些类似的东西（给它你自己的维度和标准）：

<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;
}

嗯...就是这样。问题已解决。

样式不当 - 简单 html 形式的输入元素和按钮的对齐问题

Improper styling- Alignment issue for input element & button in simple html form

html

css

twitter-bootstrap