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

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

#example {

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

玩这些价值观，他们应该得到你所需要的。如果需要，您还可以使用百分比值左右边距。

为什么表单中的所有元素都不对齐？

2 个答案: