html5表单水平标签右对齐应该怎么写

img

img

代码如下：

img

img


应该加什么代码才能实现Title，Name，Phone number右对齐

示例图是一个table，有两列，左列向右对齐，右列向左对齐

<table border="1">
    <tr>
        <td style="text-align:right;width:200px;">姓名：</td>
        <td width="200px">张三</td>
    </tr>
    <tr>
        <td style="text-align:right;width:200px;" >年龄：</td>
        <td width="200px">18</td>
    </tr>
</table>

结果如下：

img

你题目的解答代码如下：

<!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>
    .rt {
        display: inline-block;
        width: 100px;  /*文字列最大宽度*/
        text-align: right; 
    }
</style>
</head>
<body>

<form method="post" action="testing.php" id="test" name="">
    <span class="rt">Title</span><input type="text" /><br />
    <span class="rt">Name</span><input type="text" /><br />
    <span class="rt">Phone</span><input type="text" /><br />
    <span class="rt">Number</span><input type="text" /><br />
</form>

</body>
</html>

img

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

给Title，Name，Phone number这些加个标签，然后再加个宽度，居右

<label class="label">Title</label>
.label{
  width: 200px;//根据自己需求调整
  text-align: right;
  display:inline-block;
}