Question

我已经开始遵循有关如何构建响应式网页的教程，并且偶然发现了我想解决的问题。当我缩小浏览器窗口的宽度时，我不希望窗体在到达h1标头附近时仅转到下一行，而是希望输入字段缩小（或至少缩小整个窗体）。简而言之，当我调整窗口大小时，我希望整个#newsletter部分都保持在同一行。

RecyclerView

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: white;
  background: #35424A;
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type='email'] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <section id="newsletter"> <div class="container"> <h1>Subscribe to our newsletter</h1> <form> <input type="email" placeholder="Enter Email..."> <button type="submit" class="button_1">Subscribe</button> </form> </div> </section> </body> </html>什么也不做，我想我可以使用媒体查询，但是我不知道在这种情况下要使用什么CSS。

Answer 1

对于

stub_request(
  :post, 
  {MYURL}
).to_return(
  status: 200, 
  body: {
    "Success": { "TransactionId" => "123456789" }
  }.to_json, # valid json string
  headers: {"Content-Type" => "application/json"}
)

和display: flex的

#newsletter form将迫使它们保持一行，除非您添加#newsletter .container属性。

如果您是Flexbox的新手，我建议this guide。

关键部分

flex-wrap: wrap

摘要

#newsletter .container {
  display: flex;
}

#newsletter form {
  display: flex;
  float: right;
  margin-top: 15px;
}

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: white;
  background: #35424A;
}

#newsletter .container {
  display: flex;
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  display: flex;
  float: right;
  margin-top: 15px;
}

#newsletter input[type='email'] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

Answer 2

如果您不喜欢输入栏或按钮的初始宽度，只需在CSS代码中更改其宽度即可。

在这里，我使用了CSS Grid。我为表单添加了100％的宽度，因此我们可以显式设置表单内元素的宽度，以帮助我们自动调整项目的大小。

/* Global */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, 50%);
}

.button_1 {
    height: 38px;
    background: #e8491d;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    width: 100%;
}

/* Newsletter */
#newsletter {
    padding: 15px;
    color: white;
    background: #35424A;
}

#newsletter h1 {
    float: left;
}

#newsletter form {
    float: right;
    margin-top: 15px;
}

#newsletter input[type='email'] {
    padding: 4px;
    height: 25px;
    width:80%
}

form {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
}

form button {
    flex-shrink: 3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <section id="newsletter">
        <div class="container">
            
            <h1>Subscribe to our newsletter</h1>
            <form>
                <input type="email" placeholder="Enter Email...">
                <button type="submit" class="button_1">Subscribe</button>
            </form>
        </div>
    </section>

如何在一定的窗口宽度后使Web输入字段开始缩小？

2 个答案:

关键部分

摘要