Question

对不起，我知道这是超级基础，但我整天都在阅读我的编码参考书，我觉得我的想法有点不对劲。我需要在页面中心的一行中输入输入字段和“提交”按钮，类似于谷歌。

.logo {
  width: 50%;
  display: block;
  margin: auto;
}

.input-fields {
  padding: 3%;
  width: 40%;
  display: block;
  margin: auto;
  font-size: 90%;
}

.submit {
  padding: 3%;
  width: 15%;
}

<header>
  <img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">    
  <form class="center">
    <input class="input-fields" name="search" type="text" placeholder="Search for anything...">
    <input class="input-fields submit" name="find" type="submit" value="Find">
  </form>
</div>

我遇到的问题是按钮堆叠在文本字段下面。我错过了什么？

Answer 1

您看到的是display:block的默认行为。

使用display:inline-block会使它们成为块元素，因此您可以添加填充等，但要使它们内联，这样它们就会出现在彼此旁边（假设它们适合，其他样式不会更改默认行为。）

只需在CSS中将显示从block更改为inline-block：

.input-fields {
    [...]
    display:inline-block;
}

工作代码段

.logo {width: 50%; display:block; margin:auto;}

.input-fields {
    padding:3%;
    width:40%;
    display:inline-block; /* change this from block to inline-block */
    vertical-align: middle; /* this will help with any vertical alignment issues */
    margin:auto;
    font-size:90%;


    }

.submit {
    padding:3%;
    width:15%;
    } 
   
 /* Add this this to center your inputs - 
    you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}

<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
    <div class="form-wrapper">
    <form class="center">
    <input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
    <input class="input-fields submit" name="find" type="submit" value="Find"/>
    </form>
    </div>

Answer 2

Google已经垂直和水平对齐，所以你应该试试这样的东西（简化版）：

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-me {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.align-me > .form-wrapper > .center {
  display: flex;
}

＆＃13;

<div class="align-me">
  <header>
    <img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
  </header>
  <div class="form-wrapper">
    <form class="center">
      <input class="input-fields" name="search" type="text" placeholder="...">
      <input class="input-fields submit" name="find" type="submit" value="Search">
    </form>
  </div>
</div>

＆＃13;

但他们的设计没有响应，这是。

Answer 3

你错过了

display: inline-block;

关于要在线显示的元素。你现在有'display：block;'这会将元素推到自己的行上。

您可能还需要：

vertical-align: middle;

使它们相对于彼此垂直对齐。

要确保它们都在页面中保持死角，请将它们全部放在容器中（或者只使用现有的表单容器）并将其设置为：

position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;

无论屏幕大小如何，这都将确保容器在垂直和水平方向都位于中间。

如何将搜索输入和提交按钮与页面中心对齐？

3 个答案: