Question

我喜欢主站点URL的对齐，第一个总是在那里，一旦你点击添加站点，更多的继续添加，我怎么能让它们对齐相同？我尝试填充和边距，但它仍然没有不要让它们完全相同，因为自动批准或站点URL会出现问题 JS代码：

<script>
function add_fields() {
    document.getElementById('add').innerHTML += '<span style= "font-size:15px;">Site URL: <input type="text" style= "margin-right: 15px;width:220px;font-size:16px;"> Auto Approvements: <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled <br></span>\r\n';
}
</script>

HTML：

<section class="bg-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Add a Site!</h2>
                    <hr class="light">
                    <p class="text-faded">
                    <div id= "add">
                    <form style= "font-size:16px;">
                    Site URL: 
                    <input type="text" name="firstname" style= "margin-right:10px;">         
                    Auto Approvements

                    <input type="radio" name="site" value="enable"> Enabled
                    <input type="radio" name="site" value="disable"> Disabled

                    </form>
                    </div>
                    </p>
                    <input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
                    <a href="#" class="page-scroll btn btn-default btn-xl sr-button">Generate Code</a>
                </div>
            </div>
        </div>
    </section>

我正在使用bootstrap中的模板并将其工作放在上面。

Answer 1

我更新了javascript以匹配最初的html：

  <script>
    function add_fields() {
        document.getElementById('add').innerHTML += '<form style= "font-size:16px;">Site URL: <input type="text" name="firstname" style= "margin-right:10px;"> Auto Approvements <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled </form>';
    }
  </script>

https://plnkr.co/edit/ghWDeZRySfaUT4Sffr1X?p=preview

在这里，您可以看到对齐方式完全相同。如果这不能给你相同的结果，请提供css样式和其他可能影响外观的东西。

Javascript生成更改位置

1 个答案: