怎样对齐表单中的内容

img

现在要将截图内的表单元素对齐，使内容左对齐，字体不用对齐，文本框对齐就行。

给左边的文本加一个宽，左边文本的宽都一致，然后text-align:right

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
/*把文本放到span中设置一个固定的宽度，并且text-align:right右对齐*/
.text {
    display: inline-block;
    width: 200px;
    text-align: right;
}

.inputbox {
    width: 200px;
}

</style>
</head>
<body>

<span class="text">AAAAAA</span><input type="text" class="" value="inputbox" /><br />
<span class="text">BBBBBBBBBBBBB</span><input type="text" class="" value="inputbox" /><br />
<span class="text">CCC</span><input type="text" class="" value="inputbox" /><br />

</body>
</html>

如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮

label加个宽度

把左边的标签定义一个宽度，如果无法用px定义的，那就采用百分比，想对齐，必须一样宽度才能对齐，否则是无法做到对齐的