Kwn*_*ios 3 html css html-input flexbox
我在尝试进行的这两个输入中遇到了这个问题，而且我无法简单地找到使一个输入低于另一个输入的方法...\n我的意思是这样
\n\n代码在这里
\n\n* {\r\n text-decoration transition: all 0.2s;\r\n padding: 0;\r\n margin: 0;\r\n font-family: "Open Sans";\r\n}\r\nbody {\r\n display: flex;\r\n height: 100vh;\r\n background: #e5e5e5;\r\n}\r\n.wrapper {\r\n margin: auto;\r\n background: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n width: 440px;\r\n text-align: center;\r\n border-radius: 5px;\r\n overflow: hidden;\r\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n.header {\r\n padding: 50px 50px 100px 50px;\r\n min-height: 150px;\r\n background: url("https://cdn0.iconfinder.com/data/icons/elpis/144/Newsletter-128.png") no-repeat center 130px;\r\n}\r\n.header h1 {\r\n color: #536a89;\r\n text-transform: uppercase;\r\n font-size: 30px;\r\n letter-spacing: 4px;\r\n}\r\n.header p {\r\n font-size: 13px;\r\n color: rgba(92, 118, 152, 0.8);\r\n}\r\n.footer {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.footer form {\r\n flex-grow: 1;\r\n display: flex;\r\n}\r\n.footer input {\r\n background: #e0e5ec;\r\n border: none;\r\n padding: 20px 25px;\r\n flex-grow: 2;\r\n display: block;\r\n color: #5c7698;\r\n border-radius: 3px;\r\n}\r\n.footer input::-webkit-input-placeholder {\r\n color: rgba(92, 118, 152, 0.7);\r\n}\r\n.footer input:focus {\r\n outline: none;\r\n}\r\n.footer .btn-submit {\r\n background: #c6cfdc;\r\n border: none;\r\n padding: 20px;\r\n flex-grow: 1;\r\n color: #5c7698;\r\n font-weight: 700;\r\n cursor: pointer;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n font-size: 12px;\r\n}\r\n.footer .btn-submit:focus {\r\n outline: none;\r\n}<body>\r\n <div class="wrapper">\r\n <div class="header">\r\n <h1>Subscribe</h1>\r\n <p>coming soon to your inbox</p>\r\n </div>\r\n <div class="footer">\r\n <form action="">\r\n <input class="nameaki" type="text" placeholder="Enter your name here" />\r\n <input type="email" class="emailaki" placeholder="Enter your email here" />\r\n </form>\r\n <span class="btn-submit" onclick="newsletter.submit()">\xce\x95\xce\xb3\xce\xb3\xcf\x81\xce\xb1\xcf\x86\xce\xae</span>\r\n </div>\r\n </div>\r\n</body>添加flex-direction: column;到您的footer和form，它们按照您的意愿一个一个地在另一个之下。
.footer {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n}\n.footer form {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n如果这看起来不错，请告诉我。谢谢！
\n\n.footer {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n}\n.footer form {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n* {\r\n text-decoration transition: all 0.2s;\r\n padding: 0;\r\n margin: 0;\r\n font-family: "Open Sans";\r\n}\r\nbody {\r\n display: flex;\r\n height: 100vh;\r\n background: #e5e5e5;\r\n}\r\n.wrapper {\r\n margin: auto;\r\n background: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n width: 440px;\r\n text-align: center;\r\n border-radius: 5px;\r\n overflow: hidden;\r\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);\r\n}\r\n.header {\r\n padding: 50px 50px 100px 50px;\r\n min-height: 150px;\r\n background: url("https://cdn0.iconfinder.com/data/icons/elpis/144/Newsletter-128.png") no-repeat center 130px;\r\n}\r\n.header h1 {\r\n color: #536a89;\r\n text-transform: uppercase;\r\n font-size: 30px;\r\n letter-spacing: 4px;\r\n}\r\n.header p {\r\n font-size: 13px;\r\n color: rgba(92, 118, 152, 0.8);\r\n}\r\n.footer {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-direction: column;\r\n}\r\n.footer form {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.footer input {\r\n background: #e0e5ec;\r\n border: none;\r\n padding: 20px 25px;\r\n flex-grow: 2;\r\n display: block;\r\n color: #5c7698;\r\n border-radius: 3px;\r\n}\r\n.footer input::-webkit-input-placeholder {\r\n color: rgba(92, 118, 152, 0.7);\r\n}\r\n.footer input:focus {\r\n outline: none;\r\n}\r\n.footer .btn-submit {\r\n background: #c6cfdc;\r\n border: none;\r\n padding: 20px;\r\n flex-grow: 1;\r\n color: #5c7698;\r\n font-weight: 700;\r\n cursor: pointer;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n font-size: 12px;\r\n}\r\n.footer .btn-submit:focus {\r\n outline: none;\r\n}| 归档时间： |
|
| 查看次数： |
5765 次 |
| 最近记录： |