Html 如何将此按钮与文本框对齐?

Html 如何将此按钮与文本框对齐?,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我希望按钮的左侧与文本框齐平。如果有区别的话,我会使用Bootstrap3。这是我的表单html代码。如果有必要,我也可以添加CSS。多谢各位 h1{ 字号:83px; } .btn主要{ 背景:#ffffff; 边框颜色:#ffffff; 颜色:#f05324; } .btn default、.btn default:悬停、.btn default:焦点、.btn default:活动、.btn-default.active、.open>.dropdown-toggle.btn-defaul

我希望按钮的左侧与文本框齐平。如果有区别的话,我会使用Bootstrap3。这是我的表单html代码。如果有必要,我也可以添加CSS。多谢各位

h1{
字号:83px;
}
.btn主要{
背景:#ffffff;
边框颜色:#ffffff;
颜色:#f05324;
}
.btn default、.btn default:悬停、.btn default:焦点、.btn default:活动、.btn-default.active、.open>.dropdown-toggle.btn-default{
背景:#ffffff;
边框颜色:#ffffff;
颜色:#f05324;
}
.面板默认值{
边界:无;
}
输入[type=“text”]{
颜色:白色!重要;
} 
输入[type=“email”]{
颜色:白色!重要;
} 
.模型内容{
颜色:黑色!重要;
}
.左文本{
文本对齐:左对齐;
}
.文字权利{
文本对齐:右对齐;
}
.文本中心{
文本对齐:居中;
}
.navbar默认值{
背景色:#000000;
}
身体{
背景:#f05324!重要;
边缘底部:80px;
颜色:#ffffff;
}
.page header、.panel body、.panel、.panel默认值、.col-lg-9、.row{
背景:#f05324!重要;
}
.表格管制{
背景色:#f05324;
颜色:#000000;
}
人力资源{
边框颜色:#ffffff;
背景色:#ffffff;
颜色:#ffffff;
}
.链接{
颜色:#ffffff;
}
.页眉{
边际上限:0;
}
.小组委员会{
填充顶部:0;
}
.img精选{
边缘顶部:15px;
边缘底部:15px;
右边距:15px;
}
.img项目{
边缘顶部:15px;
边缘底部:15px;
}
.显示onclick{
显示:无;
}
.show-onclick 1{
显示:无;
}
.街区{
位置:绝对位置;
排名:0;
底部:0;
左:50%;
左边距://img宽度的一半
}

姓名:
电邮:
电话:
主修:

出售物品: 数量: 价格: 图1: 图2:
如果希望按钮的左边缘与文本框的左边缘匹配,则只需使用引导网格添加偏移量,如下所示:

<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
    ...
    <div class="form-group">
        <label for="itemOneImg2" class="col-sm-2 control-label">IMAGE 2:</label>
        <div class="col-sm-10">
            <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">
        </div>
    </div>

    <div class="form-group">
        <!-- Adjust col-sm-X for the buttons to adjust their positioning
             Could also add btn-block class to make the button span the column -->
        <div class="col-sm-offset-2 col-sm-9">
            <input id="additional-files" type="button" value="Additional Projects" class="btn btn-default">
        </div>
        <div class="col-sm-1">
            <input id="submit" type="button" value="Submit" class="btn btn-default">
        </div>
    </div>
</form>

...
图2:
更多详细信息(以及另一个示例)可在Bootstrap网站上找到:


编辑:基于评论中的其他信息。

您需要包含创建当前布局的代码可能需要添加css,但现在它已成功,按下了提交按钮,您应该能够将提交按钮放入表单中,并对其应用类似的方法。如果要将其与“附加文件”按钮放在同一行,请将其像上面的输入一样包装在div中,但不带偏移量,并将其放在同一表单组中,但调整列跨度。如果需要,我可以更新我的解决方案?(假设你想让他们在同一条线上)是的,那会很有帮助!我想要的是在同一条线上。谢谢:)增加“提交”按钮的列范围,减少“项目”按钮的列范围,以向左移动“提交”按钮。添加“btn block”类以使按钮填充列的宽度,可能需要按钮之间的偏移量(如果两者都使用“btn block”类)。希望对你有所帮助-如果你再次陷入困境,请浏览一下引导网站,他们有很好的文档和示例。