简历网页布局问题：左侧UL列表缩进异常，右侧正常

这问题是浏览器给<ul>标签加了默认的内边距（padding-left）和外边距（margin-left）导致的，直接重置默认样式就行，给你一套适合零基础新手的完整代码示例：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 姓名居中样式 */
        .name {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* 包裹两个列表的容器，清除浮动避免父元素塌陷 */
        .contact-container {
            overflow: hidden;
            width: 100%;
        }

        /* 重置ul的默认样式，去掉缩进和圆点 */
        .contact-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* 左侧列表左浮动 */
        .left-contact {
            float: left;
        }

        /* 右侧列表右浮动 */
        .right-contact {
            float: right;
        }

        /* 列表项间距，让排版更美观 */
        .contact-list li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="name">你的姓名</div>
    <div class="contact-container">
        <ul class="contact-list left-contact">
            <li>北京市朝阳区XX街道</li>
            <li>邮政编码：100020</li>
        </ul>
        <ul class="contact-list right-contact">
            <li>电话：138XXXX1234</li>
            <li>邮箱：yourname@example.com</li>
        </ul>
    </div>
</body>
</html>

关键步骤说明 #

• 给两个<ul>加通用类.contact-list，把默认的margin和padding设为0，同时用list-style: none去掉默认圆点符号，直接解决左侧缩进问题。
• 用.contact-container包裹两个列表，设置overflow: hidden是为了清除浮动，避免容器高度塌陷（新手先记住这个写法，后续学浮动时会理解原理）。
• 分别给左右列表加.left-contact和.right-contact类，通过float: left和float: right实现左右布局。
• 给列表项<li>加margin-bottom，让每行内容之间有间距，排版更舒服。

内容的提问来源于stack exchange，提问作者timbox90