我正在使用弹性框来显示标签和输入字段。 如何让它响应？
[英]I'm using a flex box to display label and input field. How do I make it responsive?
问题描述
I have to use a flex class to make a label and input field one line.
我必须使用 flex 类来制作标签和输入字段一行。 How do I force it to be responsive?我如何强制它响应？
My HTML Code is我的 HTML 代码是
.container{ width:1100px; margin:0 auto; } .form_single_wrap{ display:flex; flex-wrap: wrap; } .form_single_wrap label{ width:10%; } .form_single_wrap input{ width:80%; }
<div class="container"> <div class="form_wrap"> <form action=" "> <div class="form_single_wrap"> <label for="name">Name</label> <input type="text" name="name" placeholder="Name"/> </div> <div class="form_single_wrap"> <label for="email">Email Send Us</label> <input type="text" name="email" placeholder="Email"/> </div> </form> </div> </div>
How can I make it responsive?我怎样才能让它响应？
2 个解决方案
解决方案1
0 2018-05-04 09:20:40
Use % instead of px for the container :)对容器使用 % 而不是 px :)
.container{
width:100%;
margin:0 auto;
}
解决方案2
0 2018-05-04 10:25:41
I fix it also in bootstrap.我也在引导程序中修复它。 You can see in codepen你可以在codepen中看到
<html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <link rel="stylesheet" href="style.css" /> <style type="text/css"> .form_wrap{ width:100%; } .form_single_wrap{ display:flex; flex-wrap: wrap; } .form_single_wrap label{ width:10%; } .form_single_wrap input{ width:80%; } </style> </head> <body> <div class="container"> <div class="row"> <div class="form_wrap"> <form action=" "> <div class="form_single_wrap"> <label for="name">Name </label> <input type="text" name="name" placeholder="Name"/> </div> <div class="form_single_wrap"> <label for="email">Email Send Us</label> <input type="text" name="email" placeholder="Email"/> </div> </form> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" ></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在不使用两个媒体查询与弹性框相结合的情况下以更好的方式使其响应，获得这种外观非常困难 - How do i make it responsive in a better way without using two media querys combined with flex box, it was quite a struggle to obtain that look
如何使 label 出现在输入字段内？ - How do I make the label appear inside the input field?
如何使用弹性框使此表单具有响应性 - How to make this form responsive using flex box
如何使表单字段响应？ - How do i make the form field responsive?
如何使用创建HTML表单 <label><input></label> <label>和<span>？</span></label> - How do I make a HTML form using <label> <input> and <span>?
容易的。 我只想在电话号码输入字段中输入数字。 我如何在简单的js中做到这一点 - Easy one! I want only numbers to be entered in the phone number input field. How do I do that in simple js
如何使 flex box 在 safari 中工作？ - How do I make flex box work in safari?
如何使输入框更大？ - How do I make the input box bigger?
如何制作一个答案标签框来检查您的答案？ - How do I make an answer label box that checks your answer?
Angular CSS HTML 内联标签和输入字段。 如何将标签向左浮动，将输入字段向右浮动 - Angular CSS HTML inline label and input field. how to float label to the left and input field to the right
相关标签