制作谷歌搜索页：如何将class为gs与fl的div同行居中？

问题根源 #

你的两个按钮分属不同容器（一个在<form>内，一个在<form>外），且<div>默认是块级元素，会独占一行，导致无法同行显示；同时全局的text-align:center设置也会干扰局部布局逻辑。

修复方案 #

1. 调整HTML结构

将“手气不错”按钮的代码移到<form>内部，和“Google Search”按钮放在同一个父容器中，保证它们处于同一个布局上下文：

<nav>
  <div>
      <a href="image.html">Google Image Search </a>
      <a  href="advance.html">Advance Search</a>
  </div>
</nav>
<img src="image.png" class="i">

<form action="https://google.com/search" class="f">
  <div class="sb">
      <input type="text" name="q" class="foo">
  </div>
  <!-- 新增容器包裹两个按钮 -->
  <div class="buttons-container">
    <div class="gs">
        <input type="submit" value="Google Search">
    </div>
    <div class="fl">
      <a href="https://www.google.com/doodles">
          <button>I am feeling lucky</button> 
      </a>
    </div>
  </div>
</form>

2. 修改并补充CSS样式

使用Flexbox实现按钮同行居中，同时优化按钮样式：

body,a{
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding: 5px;
  margin: 5px;
}
.i{
  display: block; /* 确保图片能被margin:auto居中 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 135px;
}

nav{
  text-align: right;
  padding-top: 5px;
}

.sb input{
  border-radius: 25px ;
  border: 0.5px solid #dadce0;
  height: 40px;
  width: 480px;
  display: block;
  margin: 20px auto; /* 让搜索栏居中并和按钮拉开间距 */
}

.foo{
  font-size: medium;
  padding-left: 40px;
  padding-right: 40px;
}

/* 按钮容器使用Flexbox实现同行居中 */
.buttons-container{
  display: flex;
  justify-content: center;
  gap: 15px; /* 控制两个按钮之间的间距 */
}

/* 统一按钮样式，贴近谷歌原版 */
.gs input, .fl button{
  padding: 8px 16px;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 14px;
}

.gs input:hover, .fl button:hover{
  border-color: #dadce0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

关键改动说明 #

• 用<div class="buttons-container">包裹两个按钮容器，通过display:flex和justify-content:center直接实现同行居中效果。
• 给搜索栏添加margin:20px auto，确保它居中且和按钮区域保持合适间距。
• 统一按钮的样式并添加hover效果，还原谷歌原版的视觉体验。
• 移除body上的全局text-align:center，避免干扰局部布局逻辑，改为针对性设置元素居中。

内容的提问来源于stack exchange，提问作者Abhishek Kumar