文章/答案/技术大牛

发布

社区首页 >问答首页 >在Flexbox按钮上的flexbox搜索栏

问在Flexbox按钮上的flexbox搜索栏
EN

Stack Overflow用户

提问于 2020-07-19 20:03:27

回答 1查看 45关注 0票数 0

其目标是在某种程度上重建谷歌的搜索栏。到目前为止，我得到的是：

<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

Stack Overflow用户

回答已采纳

发布于 2020-07-19 20:13:29

试试这段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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62980045

复制

相似问题

问在Flexbox按钮上的flexbox搜索栏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Flexbox按钮上的flexbox搜索栏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Flexbox按钮上的flexbox搜索栏
EN