hr标签拐弯和form标签中的input文字域对齐

我是一名在校学生，这学期才开始接触HTML，要我们写出类似淘宝个人资料页面
但是，我碰到了一些不能解决的问题：
1.图中“个人资料”上的那个能拐弯的水平线如何编译
2.如何让form表单中的每个文字域像样例图那样对齐
3.我编译的button按钮细看还是和样例图不一致
（我已经在百度找过很多方法了，但是由于接触太浅，没能按照那些方法成功编译）

这是给出的样例图

img

这是我目前完成的情况

img

这是我的代码
#




```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<p>个人资料</p>
<span>基本资料&emsp;&emsp;头像照片</span>
<hr>
<form>
    <p>亲爱的&emsp;<span><strong>晨**********2</strong></span>，填写真实的资料，有助于好友找到你哦。</p><br>
            <label >当前头像：</label>
        <img src="../taobaotouxiang.png">
    <br><br>
            <label for="id">* 昵称：</label>
        <input type="text" width="1000px" id="id" >
    <p style="color:grey" ><font size="1">&emsp;&emsp;&emsp;&emsp;&emsp;*昵称填写须知：与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能回收</font></p>
    <br>
    <label for="name">真实姓名：</label>
    <input type="text" id="name" width="300px" >
    <br>
    <br>
            <label for="sex" >*性别：</label><input type="radio" id="sex">男 <input type="radio" id="sex" class="text-align">女
    <br>
    <br>
    <label for="birthday">生日：</label>
    <select size="1" name="年" id="birthday">
        <option >年</option>
    </select>
    <select size="1" name="月">
        <option >月</option>
    </select>
    <select size="1" name="日">
        <option >日</option>
    </select>
    <span style="color:grey">（出生年份为保密）</span>
    <label for="constellation" >星座：</label>
    <select size="1" id="constellation">
        <option>**********</option>
    </select>
    <br>
    <br>
    <label for="stay">居住地：</label>
    <select size="=1" name="stay" id="stay">
        <option>
        </option>
    </select>
    <select size="1" name="stay" id="stay">
        <option>
        </option>
    </select>
    <select size="1"name="stay" id="stay">
        <option></option>
    </select>
    <br>
    <br>
    <label for="hometown">家乡：</label>
    <select size="=1" name="hometown" id="hometown">
        <option>
        </option>
    </select>
    <select size="1">
        <option>
        </option>
    </select>
    <select size="1">
        <option></option>
    </select>
    <br>
    <br>
    <hr>
    <button type="submit" style="background-color:orange;border-color:orange;color:white;aglin:center">提交</button>
</form>
</body>
</html>

1.个人资料上的那个能拐弯的水平线用border边框来做
2.form表单中的项目文字和前面的*号都放到固定宽度的标签中就对齐了
3.样例图中的button按钮应该是个图片用<input type="image" src="submit.png">
图片自己做吧

你题目的解答代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            /*hr标签拐弯用border边框来做*/
            #hp {
                border-bottom: 1px solid #999;
            }
            #hp span{
                display: inline-block;
                margin-left: 10px;
                margin-bottom: -1px;
                padding: 5px;
                border: 1px solid #999;
                border-bottom-color: #fff;
            }
            #taobaotouxiang {
                vertical-align: top;
            }
            .tk {
                display: inline-block;
                width: 20px;
                text-align: center;
            }
            .tp {
                display: inline-block;
                width: 80px;
            }
        </style>
    </head>
    <body>
        <p id="hp"><span>个人资料</span></p>
        <span>基本资料&emsp;&emsp;头像照片</span>
        <hr>
        <form style="padding-left: 20px;">
            <p style="padding-left: 20px;">亲爱的&emsp;<span><strong>晨**********2</strong></span>，填写真实的资料，有助于好友找到你哦。</p>
            <br>
            <span class="tk"></span><label class="tp">当前头像：</label>
            <img src="../taobaotouxiang.png" id="taobaotouxiang">
            <br>
            <br>
            <span class="tk">*</span><label class="tp" for="id">昵称：</label>
            <input type="text" width="1000px" id="id">
            <p style="color:grey;padding-left: 100px;font-size: 70%;">*昵称填写须知：与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能回收
            </p>
            <br>
            <span class="tk"></span><label class="tp" for="name">真实姓名：</label>
            <input type="text" id="name" width="300px">
            <br>
            <br>
            <span class="tk">*</span><label class="tp" for="sex">性别：</label>
            <input type="radio" id="sex">男
            <input type="radio" id="sex" class="text-align">女
            <br>
            <br>
            <span class="tk"></span><label class="tp" for="birthday">生日：</label>
            <select size="1" name="年" id="birthday">
                <option>年</option>
                <option>1900年</option>
                <option>xxxx年</option>
                <option>2022年</option>
            </select>
            <select size="1" name="月">
                <option>月</option>
                <option>1月</option>
                <option>12月</option>
            </select>
            <select size="1" name="日">
                <option>日</option>
                <option>1日</option>
                <option>31日</option>
            </select> <span style="color:grey">（出生年份为保密）</span>
            <label for="constellation">星座：</label>
            <select size="1" id="constellation">
                <option>**********</option>
            </select>
            <br>
            <br>
            <span class="tk"></span><label class="tp" for="stay">居住地：</label>
            <select size="=1" name="stay" id="stay">
                <option></option>
                <option>xxxxxxxxxxxx</option>
            </select>
            <select size="1" name="stay" id="stay">
                <option></option>
            </select>
            <select size="1" name="stay" id="stay">
                <option></option>
            </select>
            <br>
            <br>
            <span class="tk"></span><label class="tp" for="hometown">家乡：</label>
            <select size="1" name="hometown" id="hometown">
                <option></option>
                <option>xxxxxxxxxxxx</option>
            </select>
            <select size="1">
                <option></option>
            </select>
            <select size="1">
                <option></option>
            </select>
            <br>
            <br>
            <hr>
            <input type="image" src="submit.png">
        </form>
    </body>

</html>

img

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

img

使用legend标签，fieldset标签，
对齐是所以table标签，设置td的对齐方式为左对齐。

没接触到div标签能写成这样已经很不错了，等学会div你就知道那些问题该怎么解决了，包括布局的对齐问题，还有button标签样式不好设置的问题，都可以用div解决

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

按钮可以用css背景色渐变做。