在CSS中对齐表单元素
我是CSS的新手，有一个简单的登录表单，试图正确对齐。基本上是两列，一列带有标签和“ 登录” 按钮，另一列是文本框。如何在CSS中做到这一点？
HTML代码是：
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
问题答案：
这是一种有效的方法：
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* In order to define widths */
display: inline-block;
}
label {
width: 30%;
/* Positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* Large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* Only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
调整尺寸和边距以适合您的用例和美观。
-
我试图创建一个嵌套表，该表与单元格的右边缘对齐，但尽管向包含单元格添加了，但它仍然保持在左侧。 灰色底纹显示表格和单元格的实际位置： 正在制作的内容： 所以基本上，我想问的是，我是否缺少了什么东西，可以使嵌套表正确地向右对齐。
-
问题内容： 我不知道如何对齐JTable中单元格的值。 例如，Jtable显示姓名工资X.先生100000.50 XXXX 234.34 YYYy 1205.50 我想以以下格式对齐“薪水”。 如何在JTable上方对齐 问题答案： 无需为此创建自定义类，只需使用默认渲染器即可： 或者更好的方法是在表中实际存储Double值，然后使用适当的数字渲染器，数字渲染器将自动右对齐。然后，您可以使用表格格
-
问题内容： 将单选按钮/复选框与文本正确对齐的最干净方法是什么？到目前为止，我一直使用的唯一可靠的解决方案是基于表的： 有些人可能会对此表示不满。我刚刚花了一些时间（再次）研究无表解决方案，但失败了。我尝试了浮动，绝对/相对定位和类似方法的各种组合。它们不仅主要默默地依赖于单选按钮/复选框的估计高度，而且在不同的浏览器中的行为也有所不同。理想情况下，我想找到一种不假设大小或浏览器特殊问题的解决方案
-
问题内容： 我是HTML的新手，正在尝试学习如何使用表单。 到目前为止，我最大的问题是对齐表格。这是我当前的HTML文件的示例： 问题在于，“电子邮件”后的字段框与名字和姓氏相比在空格方面有很大不同。使其真正“排队”的“正确”方法是什么？ 我正在尝试练习良好的格式和语法…很多人可能不确定使用CSS来做到这一点，到目前为止，我仅了解HTML的基本知识。 问题答案： 另一个使用CSS的示例，我只是将表
-
问题内容： 我在浮动div中有一个img，但我不知道如何垂直居中。 垂直对齐：当然中间不起作用。 问题答案： 要在父元素中垂直对齐文本，并谨记的是一个内联元素等行为 类似 文本，你可以简单地设置到父元素： 。
-
我有以下代码将图像放在比图像大小更宽的表格单元格中心。我使用了文本中心和对齐中产阶级，但没有任何效果。图像仍然在单元格的左侧。我是引导新手，所以不知道任何其他技术。