其目标是在某种程度上重建谷歌的搜索栏。 目前我得到的是:
<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
试试这个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;
}
