弹性框按钮上方的弹性框搜索栏答案

【问题标题】：Flexbox searchbar over flexbox buttons弹性框按钮上方的弹性框搜索栏
【发布时间】：2020-11-08 19:10:37
【问题描述】：

我们的目标是在某种程度上重新创建 google 的搜索栏。到目前为止我得到了什么：

<head>
    <title>Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="positions.css">
</head>
<body>    
    <div id="input_field">
        <input type="text" name="q">
    </div>
    <form action="https://google.com/search">
        <div class="flexbox-container">                
            <div class="button_search_pos"><input type="submit" value="Google Search"></div>
            <div class="lucky_pos"><input type="submit" value="I’m Feeling Lucky"></div>     
        </div>

还有.css：

我在 Stackoverflow 上尝试了一些其他已解决问题的提示，但它们似乎不起作用。在 youtube 上找到了一些像这样已经完成的表格的视频，但这不是我做事的方式。如何将输入集中在 Flexbox 的两个按钮上？输入必须是“灵活的”，以便当页面缩小时，它会相应地换行到其他元素。

提前致谢！

#input_field{
    position: absolute;
    top: 310px;
    left: 41%;
}
.flexbox-container{
    display: flex;
    align-items: center;
    justify-content: center;    
    min-height: 100vh;
}
.lucky_pos, .button_search_pos{    
    text-align: center;
    padding:1px;
    margin: 0;
    flex-direction: row;
}```

  [1]: https://i.stack.imgur.com/7SfuF.png

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

试试这个 CSS 代码，我编辑了你的

body {
  text-align: center;
}
#input_field{
  
    width: 50%;
    margin: auto;
    margin-top: 10%
}
.flexbox-container{
    display: flex;
    align-items: center;
    justify-content: center;    
   margin-top: 5%;
}
.lucky_pos, .button_search_pos{    
    text-align: center;
    padding:1px;
    margin: 0;
    flex-direction: row;
}

【讨论】：

这让他们离彼此越来越远。
这是我附加的 css 的结果ibb.co/VWzLgRV
您能否提供一个屏幕截图，说明您在应用我的 CSS 编辑后得到的结果？
增加了输入的边距。我现在很高兴！谢谢。