Question

提交我的Odin项目练习后。我以为在15英寸MacBook Pro上观看时，所有内容都对齐并居中。但是，当我在更大的计算机屏幕上查看正在工作的完整网页时，我注意到输入搜索框不再居中。除此之外，当调整窗口大小时，位于搜索框内的麦克风图像及其下方的两个灰色按钮会浮动到空间中。

而不是重新编写练习。我试图将表单框，麦克风图像和两个按钮放在自己的Divs中，以查看是否有助于将框居中，但没有运气。我还玩过flexbox，margin：0 auto，并设置了不同的宽度，但是什么也没有。

您可以在此处查看： https://lawsin-google-homepage.netlify.com/

项目代码在这里： https://repl.it/@jl88s/RoyalblueFarTrust

<section class="main-container">

        <h1 class="google-logo-header">Google</h1>
        <img src="google-logo.svg" alt="google-logo" id="google-logo">

        <form action="/action_page.php">
            <input class="form-box" type="text" name="search">
            <a href="#"><img src="google-mic.png" id="google-mic" alt="microphone"></a>
        </form>

        <button class="btn-one buttons">Google Search</button>
        <button class="btn-two buttons">I'm Feeling Lucky</button>

</section>

我期望的是，每当我调整窗口大小时，我都希望将搜索框，麦克风和按钮置于居中位置，并响应屏幕尺寸。

Answer 1

在这里，我将提供一个可以帮助您的演示：

<form action="/action_page.php">
            <input class="form-box" type="text" name="search">
            <a href="#"><img src="https://police.un.org/sites/default/files/radio-microphone.png" id="google-mic" alt="microphone"></a>
        </form>

    form{
    position:relative;
}
input{
    width:100%;
    height: 50px;
    border-radius: 10px;
    margin:0;
}
a{
    margin:0;
    padding: 10px 5px;
    position:relative;
    right:0;
    top:0;
    position:absolute;
}
a img{
    width: 30px;
    margin:2px 10px;
}

https://codepen.io/anon/pen/QPzMyv

Answer 2

我尝试调整样式，尝试用以下代码替换您的style.css文件：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    height: 100vh;
}

li {
    list-style-type: none;
}

li a {
    text-decoration: none;
    color: #000;
    opacity: 0.75;
}

li a:hover {
    text-decoration: underline;
}

.header-container {
    width: 100%;
    height: 60px;
}

.nav-list ul {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-list ul li {
    display: flex;
    justify-content: space-between;
}

.left-half {
    margin-right: auto;
    padding-left: 15px;
}

.left-half li a{
    margin: 15px 8.5px 0 10px;
}

.right-half {
    margin-left: auto;
}

.dot-box {
    padding: 0 3px;
}

.dots {
    height: 16px;
    width: 16px;
    opacity: .7;
    margin-top: 5px;
}

.dots:hover {
    opacity: 1;
}

.sign-in-btn {
    padding-right: 22px;
}

#sign-in-button {
     color: #fff;
     border: 1px solid #4285f4;
     font-weight: bold;
     background:#4387fd;
     line-height: 28px;
     padding: 0 12px;
     border-radius: 2px;
     opacity: 1;
     text-decoration: none;
}

/* #02. Title / Search Bar */

.google-logo-header {
    display: inline-block;
    text-indent: -9999999px;
}

#google-logo {
    display:inline-block;
    width: 370px;
    z-index: 0;
    opacity: .91;
}

.main-container {
    text-align: center;
    position: relative;
}

.form-box {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 
    0 0 0 1px rgba(0,0,0,0.08);
    width: 584px;
    height: 44px;
    border-radius: 2px;
    border: none;
    outline: none;
    position: relative;

    font-size: medium;
    padding-left: 16px;
}

.form-box:hover {
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 
    0 0 0 1px rgba(0,0,0,0.08);
}

#google-mic {
    position: relative;
    right: 38px;
    height: 20px;
}

.buttons {
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    color: #757575;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin: 11px 4px;
    min-width: 54px;
    padding: 9px 16px;
    text-align: center;
}

.buttons:hover {
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    color: #000;
}

.btn-one {
    position: relative;

}
input{

}
.btn-two {
    position: relative;

}

/* #03. Footer */

.footer-container {
    background-color: #f2f2f2;
    border-top: 1px solid #e4e4e4;
    width: 100%;
    bottom: 0;
    position: fixed;
    line-height: 40px;
}

.footer-list {
    display: flex;
    align-items: center;
}

.footer-list li a {
    padding-left: 27px;
}

.settings-pad {
    padding-right: 27px;
}

.footer-right {
    margin-left: auto;
}

Answer 3

使网站具有响应能力的主要问题是您使用了大量position: absolute;并设置了确切的左右位置。如果您想创建一个响应站点，通常这真的很糟糕。最好的方法是使用Flexbox或CSS Grid和Media Queries，它们都随附有库存标准CSS。

如果您想了解更多信息，请阅读这里

Flexbox：

CSS网格：

媒体查询：

更改您的代码

这是我对您的代码所做的更改。您的HTML很好，我只是对其稍作更改以允许使用Flexbox。

<section class="main-container">
    <!-- <h1 class="google-logo-header">Google</h1> -->
    <img src="images/google-logo.svg" alt="google-logo" id="google-logo">
    <form class="search-bar" action="/action_page.php">
        <input class="form-box" type="text" name="search">
        <a href="#"><img src="images/google-mic.png" id="google-mic" alt="microphone"></a>
    </form>
    <div class="btn-row">
        <button class="btn-one buttons">Google Search</button>
        <button class="btn-two buttons">I'm Feeling Lucky</button>
    </div>
</section>

对于您的CSS，我将.main-container更改为一个flexbox列，其中所有项目均与垂直中心对齐

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center
}

我还从所有元素中删除了position: absolute和左，右，下，上规则，因为它们使用了设置的px数量，因此没有响应。

我添加到表单中的.search-bar类的目的是简单地创建一个flexbox行，该行也可以使项目与垂直中心对齐。

.search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#google-mic {
  height: 25px;
  margin-left: -30px;
}

由于麦克风图像始终位于输入框之后，因此您可以将其设置为负的空白边距，使其向左移动。这可能不是执行此操作的最佳方法，但是我过去从未发现与此相关的问题。

就像.search-bar一样，我只是在类btn-row中添加了一个div，并将其中的两个按钮包装在其中，以允许它们位于flexbox行中。

.btn-row {
  display: flex;
  flex-direction: row;
}

选中此JSFiddle作为工作示例，请记住，我没有更改输入框上设置的px宽度之类的东西，这会导致在移动屏幕等方面出现问题。

我建议您查看链接的资源，并尝试对搜索栏之类的内容使用％宽度。您还需要更改现有的svg，以便在实际的Google徽标上方和下方没有太多的空格。我尝试在图像上设置一个高度，但这只是缩小了整个范围。

如何使输入搜索栏，麦克风图像和两个小框响应？

3 个答案:

更改您的代码