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

Posted 2023-01-24

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

而不是重写练习。我试着将表格盒，麦克风图像和两个按钮放在他们自己的Div中，看看这是否有助于盒子的居中，但没有运气。我也玩过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>

我希望每当我调整窗口大小时，我希望搜索框，麦克风和按钮居中并响应屏幕的大小。

答案

在这里，我留下一个可以帮助您的演示：

---

<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

另一答案

我试图调整样式，尝试用这个替换你的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;

另一答案

使您的网站响应的主要问题是您使用了大量的position: absolute;并设置了确切的左右位置。如果你想建立一个响应式网站，这通常是非常糟糕的。实现这一目标的最佳方法是使用Flexbox或CSS网格和媒体查询，所有这些都带有库存标准CSS。

如果您想了解更多信息，请阅读以下内容

Flexbox的：

• W3Schools
• CSS-Tricks

CSS网格：

• W3Schools
• CSS-Tricks

媒体查询：

• Responsive Web Design - W3Schools
• CSS Media Queries Examples - W3Schools

对代码的更改

以下是我对您的代码所做的更改。您的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和left，right，bottom，top规则，因为它们使用了set px amount并且因此没有响应。

我添加到表单中的.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宽度，这将导致移动屏幕等问题。

我建议查看我链接的资源，并尝试使用％widths来搜索搜索栏。您还需要更改您拥有的svg，以便在实际Google徽标的上方和下方没有太多空白。我尝试在图像上设置一个高度，但这只是缩小了整个事情。