HTML/CSS将元素移动到其他位置_Html_Css_Twitter Bootstrap

HTML/CSS将元素移动到其他位置

html css twitter-bootstrap

HTML/CSS将元素移动到其他位置,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我觉得我的问题有一个简单的答案，但我很难在没有找到相关答案的情况下用词来表达。我希望使用CSS将一个按钮移动到另一个按钮的下方，但无法在HTML中将该元素放置在该按钮下方。下面是我正在使用的代码的简化版本，以说明我的问题： <form class="form1">  <button class="button1"></button> <

我觉得我的问题有一个简单的答案，但我很难在没有找到相关答案的情况下用词来表达。我希望使用CSS将一个按钮移动到另一个按钮的下方，但无法在HTML中将该元素放置在该按钮下方。下面是我正在使用的代码的简化版本，以说明我的问题：

<form class="form1">
   <!-- other input elements -->
   <button class="button1"></button>
</form>
<form class="form2">
   <button class="button2"></button>
</form>

“form1”必须位于“form2”之上，但我希望将“button1”移到“button2”之下。这可以通过CSS实现吗？如果有帮助的话，我使用的是Bootstrap4

编辑：谢谢你的回复！我应该更清楚，我已经更新了我的代码，我希望这对我有所帮助。“form1”中还有一些其他输入元素需要出现在“form2”上方。当然，事实就是这样。然而，我不想将表格1移到表格2之下，而只想将按钮1移到按钮2之下。form1中的所有其他元素我希望保持在form2之上。

您可以使用flexbox和该属性来直观地更改它们的显示顺序，而无需触摸HTML结构：

.wrapper{
显示器：flex；
弯曲方向：立柱；
}
.表格2{
顺序：-1；
}


按钮1
按钮2
按钮3

您可以将flexbox与属性一起使用，在不接触HTML结构的情况下直观地更改其显示顺序：

.wrapper{
显示器：flex；
弯曲方向：立柱；
}
.表格2{
顺序：-1；
}


按钮1
按钮2
按钮3

flexbox可以使用order属性更改任何元素的视觉顺序

CSS

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap div {
  padding: 1em;
}
#first {
  background: #64703b;
  order: 2
}
#last {
  background: #ee0000;
  order: 1
}

HTML

<div class="wrap">  
<form class="form1" ID="first">
   <button class="button1">button1</button>
</form>
<form class="form2" ID="last">
   <button class="button2">button2</button>
</form>
</div>


按钮1
按钮2

flexbox可以使用order属性更改任何元素的视觉顺序

CSS

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap div {
  padding: 1em;
}
#first {
  background: #64703b;
  order: 2
}
#last {
  background: #ee0000;
  order: 1
}

HTML

<div class="wrap">  
<form class="form1" ID="first">
   <button class="button1">button1</button>
</form>
<form class="form2" ID="last">
   <button class="button2">button2</button>
</form>
</div>


按钮1
按钮2

您也可以通过使用CSS位置来实现这一点：

div{position:relative}
.form1{位置：绝对；边距顶部：22px；}
.form2{位置：绝对}


按钮1
按钮2

您也可以通过使用CSS位置来实现这一点：

div{position:relative}
.form1{位置：绝对；边距顶部：22px；}
.form2{位置：绝对}


按钮1
按钮2

您可以使用bootstrap 4创建一个解决方案，您已经使用了bootstrap 4

我已经为这个解决方案使用了Bootstrap 4个网格顺序类

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 order-2">
                    <form class="form1 ">
                        <button class="button1">Button 1</button>
                    </form>
                </div>
                <div class="col-12 order-1">
                    <form class="form2 ">
                    <button class="button2">Button 2</button>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


文件
按钮1
按钮2

您可以使用bootstrap 4创建一个解决方案，您已经使用了bootstrap 4

我已经为这个解决方案使用了Bootstrap 4个网格顺序类

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 order-2">
                    <form class="form1 ">
                        <button class="button1">Button 1</button>
                    </form>
                </div>
                <div class="col-12 order-1">
                    <form class="form2 ">
                    <button class="button2">Button 2</button>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


文件
按钮1
按钮2

您可以使用“button1”的

position:absolute

css属性将其移动到任何位置，而不影响其他元素您不想添加或更改html？这听起来像是一个问题，您实际要解决的问题是什么？最少的例子是好的，但如果忽略了重要的上下文，就有太少的事情。@JonP是的，你确实是对的。完整上下文：我有一个表单，其中包括一个带有相应复选框的列表和一个删除选中项目的按钮。在该表单下面是另一个表单，它有一个允许用户添加内容的输入和一个确认添加该输入的按钮。从美学角度看，在输入上方放置delete按钮看起来很奇怪，我正试图将delete按钮移动到输入字段下方。您可以对“button1”使用

position:absolute

css属性要在不影响其他元素的情况下将其移动到任何位置，您不想添加或更改html吗？这听起来像是一个问题，您实际要解决的问题是什么？最少的例子是好的，但如果忽略了重要的上下文，就有太少的事情。@JonP是的，你确实是对的。完整上下文：我有一个表单，其中包括一个带有相应复选框的列表和一个删除选中项目的按钮。在该表单下面是另一个表单，它有一个允许用户添加内容的输入和一个确认添加该输入的按钮。从美学角度看，在输入上方放置删除按钮看起来很奇怪，我试图将删除按钮移动到输入字段下方。根据我在帖子中所做的编辑，有没有办法做到这一点？button1不是button2的姐妹元素，因为两者都是各自形式的子元素，我很难找到与我相关的CSS属性。因此，请尝试使父位置相对，子位置绝对，然后应用边距/上/左/右/下等来调整子元素的位置。得到了，谢谢@JerilonFenton——如果它对你有用，别忘了接受答案：）根据我在帖子中的编辑，有没有办法做到这一点？button1不是button2的姐妹元素，因为两者都是各自形式的子元素，我很难找到与我相关的CSS属性。因此，请尝试使父位置相对，子位置绝对，然后应用边距/上/左/右/下等来调整子元素的位置。得到了，谢谢@杰里隆芬顿-如果它对你有效，别忘了接受答案：）