Question

我是该网站的新手。

我在CSS和HTML中遇到问题，要点亮同一行中的文本框。这意味着目前它们没有对齐。你能帮忙解释一下吗？

<!DOCTYPE html>

<html>
<style>
.input1:focus {
background-color: yellow;
}
.input1:hover {
background-color: cyan;
}
</style>

<body>
<form>
First name: <input class="input1" type="text" name="firstname"><br>
Last name: <input class="input1" type="text" name="lastname"><br>
E-mail Address: <input class="input1" name = "email" placeholder =     "name@domain.com">

<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>

</form>

</body>
</html>

Answer 1

文本框未对齐，因为每个文本框前都有文本。我建议使用一个表，然后使用CSS来确保没有行/列轮廓

<form>
<table>
<tr><td>First name:</td> <td><input class="input1" type="text" name="firstname"></td></tr>
<tr><td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td></tr>
<tr><td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =     "name@domain.com"></td></tr>

<tr>
<td><input type = "submit" value = "Submit Form"></td>
<td><input type = "reset" value = "Reset button"></td>
</tr>
</table>    
</form>

有关更多帮助，请参阅https://www.w3schools.com/html/html_tables.asp！

Answer 2

您可以使用float: left;和float: right;。这是一个很好的资源https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old。

Answer 3

HTML

<form>
<table><tr>
<td>First name:</td> <td><input class="input1" type="text" name="firstname"></td>
<td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td>
<td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =     "name@domain.com"></td></tr>

</table>
<div class="makeCenter">
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</form>

CSS

.makeCenter{
  text-align:center;
  width:100%;
  padding:20px 0 0  0;
}
input[type=submit]{
  margin-right:20px;
}

根据我的猜测，你一定期待这个！

Answer 4

将标签包裹在var a ={a:1} var b={a:5,b:6} b['d']=33 Object.defineProperty(b,'c',{ value:'eee', enumerable: true }) var t ={} Object.assign(t,a,b) console.log(t)中。向具有相同类名的每个div添加divs属性，将以下样式添加到该类：

class（这会显示与display: inline-block;元素位于同一行的标签）
添加input无论您想要的是什么。在我的例子中，我做了width

120px

.input1:focus {
  background-color: yellow;
}
.input1:hover {
  background-color: cyan;
}
.label {
  display: inline-block;
  width: 120px;
}

CSS / HTML表单对齐文本框

4 个答案: