css html表单缺少边框和框文本对齐方式
[英]css html form missing border and alignment of box text
问题描述
Have some difficulties in placing a form in a box.
将表格放入盒子时有一些困难。 It does not turn out well.结果并不好。 i am curious if anyone has a suggestion.我很好奇是否有人有建议。 This is a form that is going to be placed at the side of the a dynamic text.这是一个将放置在动态文本旁边的表单。 I am also curious how to move the box text one step to the right since the text is one letter longer than the one above.我也很好奇如何将框文本向右移动一步，因为文本比上面的长一个字母。 Nothing fancy but the alignment and form box is crucial.没什么特别的，但对齐和表单框至关重要。 Illustration插图
A picture of the form i want :我想要的表格图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="action_page.html">
<form>
<h1>Text<h1></br></br>
Name: <input type="text" name="Name" placeholder="Name hier.."></br>
Epost: <input type="text" name="Epost" placeholder="Epost hier.."></br>
<input type="submit" value="Senden">
</form>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2019-02-27 13:26:40
Try using it and see if it helps:-尝试使用它，看看它是否有帮助：-
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } } </style> </head> <body> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">Name:</label> </div> <div class="col-75"> <input type="text" id="fname" name="Name" placeholder="Name hier.."> </div> </div> <div class="row"> <div class="col-25"> <label for="fname">Epost:</label> </div> <div class="col-75"> <input type="text" id="fname" name="epost" placeholder="Epost hier.."> </div> </div> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div> </body> </html>
I Have added CSS also u can see the respective element and add to you code to get the desired effect.Please upvote if it helps.我已经添加了 CSS 你也可以看到相应的元素并添加到你的代码中以获得所需的效果。如果有帮助，请点赞。
解决方案2
0 2019-02-27 13:32:38
Please try something like this请尝试这样的事情
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<h1>Text</h1>
<div class="input-wrapper">
<label for="name">Name</label>
<input type="text" name="Name" placeholder="Name" id="name">
</div>
<div class="input-wrapper">
<label for="email">Email</label>
<input type="text" name="Epost" placeholder="Email" id="email">
</div>
<button type="submit">Send</button>
</form>
</body>
</html>
After adding some CSS for styling, this can be the result: https://codepen.io/anon/pen/QobvQL?editors=1100添加一些 CSS 样式后，结果可能是： https : //codepen.io/anon/pen/QobvQL?editors=1100
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.