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

我正在尝试添加一个新的联系方式到我已经运行的网站

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

代码是使用引导框架构建的。看起来不错。但当我把它应用到我的网站上时，有些东西不适合我。upload元素被概述。它不再流行了。按钮溢出了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

---

除了注释中的建议外，对于表单，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>

---

我不得不在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;
}

---

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

.hril in style.css行：356具有固定高度。你能删除这个并添加一些填充吗？这很成功。但是输入元素“browse”呢@murnaxbecause您的容器表单没有填充，默认情况下引导将input[type=file]display属性指定为“block”。您的输入文件如下所示。尝试将此样式添加到输入文件类。文件上载{width:93%；display:inline block；}dropbox文件中没有输入文件。你可以这样添加它

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