css html表单缺少边框和框文本对齐方式
[英]css html form missing border and alignment of box text
问题描述
将表格放入盒子时有一些困难。 结果并不好。 我很好奇是否有人有建议。 这是一个将放置在动态文本旁边的表单。 我也很好奇如何将框文本向右移动一步，因为文本比上面的长一个字母。 没什么特别的，但对齐和表单框至关重要。 插图
我想要的表格图片：
<!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
尝试使用它，看看它是否有帮助：-
<!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>
我已经添加了 CSS 你也可以看到相应的元素并添加到你的代码中以获得所需的效果。如果有帮助，请点赞。
解决方案2
0 2019-02-27 13:32:38
请尝试这样的事情
<!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>
添加一些 CSS 样式后，结果可能是： https : //codepen.io/anon/pen/QobvQL?editors=1100
HTML在CSS框的上边框中插入文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.