为什么我的表单的所有元素都没有对齐？

Question

我不明白为什么我的表单中的所有元素都没有跟随align="right" 标记。理想情况下，我希望所有内容都居中，但我注意到输入问题、添加资金和添加标签的部分位于左侧，而添加文件和提交按钮的部分是唯一遵循对齐规则的元素在<form> 标签中。为什么是这样？如何将所有内容对齐？

HTML

    <div class="container">
        <!--Sections: Question, Add money, Add file, Submit-->
        <form role="form" align="right">

        <!-- Section to type question-->
            <div class="form-group" id="AddQuestion">
                <textarea class="form-control" rows="5" placeholder="Search"></textarea>
            </div>

        <!--Section to add money---->
            <div class="input-group" id="AddMoney">
              <span class="input-group-addon">$</span>
              <input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)'>
            </div>

        <!--Section to add tags-->
            <div class="input-group" id="AddTag">
              <input type="text" class="form-control" placeholder="Tags" aria-describedby="basic-addon1">
            </div>

        <!--Section to add file-->
            <div id="AddFile">
                <a href="#" onclick="document.getElementById('uploadFile').click(); return false;" />Add File</a>
                <input type="file" id="uploadFile" style="visibility: hidden;" />
            </div>

            <div id="imagePreview"></div>

        <!--Section for the Submit button-->
            <div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>

</body> 

CSS

form {

}
.container {
    max-width:500px;
}
#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}
#AddMoney {
    max-width:200px;
}
#AddFile {
    position:relative;
    top:20px;
}
#AddTag {
    position:relative;
    top:20px;
}

Answer 1

这是因为您的控件上应用了其他 CSS 类。例如，您的 div 和 textarea 分别具有 CSS 类 form-group 和 form-control。检查您的 CSS，您将能够看到导致此问题的 CSS 类。

您可以使用 F12 按钮打开浏览器的开发者工具，当您检查元素时它会显示相应的 HTML 和 CSS。

希望这能帮助您解决问题。

Answer 2

HTML 的 align 属性随着 HTML5 和 CSS3 的发布而过时。一个好的解决方法是使用 CSS 属性来使用 margin-left 或 margin-right 属性对齐元素。

#example {

margin-left: 1px; /*play around with these values*/
margin-right 1px; /*play around with these values*/
}

玩转这些价值观，它们应该会为您提供所需的东西。如果需要，您还可以使用左右边距的百分比值。