弹性框按钮上的弹性框搜索栏

Question

目标是在某种程度上重新创建 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 到：

我在 Whosebug 上尝试了其他已解决问题的几个提示，但它们似乎没有用。在 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

Answer 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;
}

弹性框按钮上的弹性框搜索栏

Flexbox searchbar over flexbox buttons

html

css

css-position

flexbox