使用 flex 在输入表单中放置按钮

Question

我能够得到我想要将按钮放置在输入表单中的表单，但是随着屏幕尺寸变小，表单和按钮不会像按钮那样堆叠在一起没有放在表格内。

基本上，我希望桌面上的表单内的按钮在移动设备上堆叠在一起。有任何想法吗？如果我将按钮位置更改为 relative 那么它就不能放在 form

Image of form on desktop

Image of form on mobile

.button {
  font-size: 16px !important;
  border-radius: 50px !important;
  position: absolute;
  margin-right: 5px !important;
}

#form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}

@media (max-width: 800px) {
  #url-25 {
    flex-direction: column !important;
    align-items: stretch;
    width: 100% !important;
    padding: 0 20px !important;
  }
}

<form id="form">
  <input type="text" name="name" placeholder="text">
  <input type="submit" value="BUILD YOUR APP"></input>
</form>

Answer 1

这里有几条评论。

媒体查询中有一个 url-25，但给定代码中没有 url-25 id，并且在更改媒体大小时没有任何改变 #form 布局。

此外，媒体查询中有几个 !importants 似乎没有任何功能，至少给出了问题中的代码。

<style>
.button{
            font-size: 16px !important;
            border-radius: 50px !important;
            position: absolute;
            margin-right: 5px !important;
    }


   

     #form{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: end;
    }

    @media (max-width: 800px) {
        #form{
             flex-direction: column;
             align-items: stretch;
             width: 100%;
             padding: 0 20px;    
  }
        }
        </style>

<form id="form">
    <input type="text" name="name" placeholder="text">
    <input type="submit" value="BUILD YOUR APP"></input>
</form>

Answer 2

我已经根据您的要求更改了您代码中的一些属性。检查下面的片段。该按钮将位于桌面上的输入框内，并且将堆叠在移动设备上（小于 567 像素）。

我对您的代码所做的一些更改包括：

.button 的样式不存在
有 #url-25 的风格，但也没有。
输入提交更改为按钮提交。
删除了不必要的 !importants。

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

#form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

button {
  font-size: 16px;
  border-radius: 50px;
  position: absolute;
  padding: 10px;
  right: 0;
  height: 100%;
}

input {
  width: 100%;
  border-radius: 50px;
  padding: 10px;
}

input:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

@media (max-width: 567px) {
  #form {
    flex-direction: column;
  }
  button, input {
     position: static;
     width: 100%;
     border-radius: 0;
  }
}

<form id="form">
    <input type="text" name="name" placeholder="text">
    <button type="submit">BUILD YOUR APP</button>
</form>

使用 flex 在输入表单中放置按钮

Place button inside input form with flex

html

css

forms

input

flexbox