Lansional 2024-03-21 16:40 采纳率: 88%
浏览 5
已结题

这个右边距应该怎样添加，为什么我的无序列表和有序列表没项目符号

这个右边距应该怎样添加，为什么我的无序列表和有序列表没项目符号
原图：

img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }

        .list {
            width: 49%;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            display: flex;
        }

        .time {
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="list">
            <div class="title">
                <h2>清华广角</h2>
                <a href="news/qhgj.htm">更多 &gt;</a>
            </div>
            <ol>
                <li>
                    <div class="time">2024.03.20</div>
                    <div class="name"><a href="info/1180/110261.htm">"城市发展与生态保育"校友交流研讨会在深圳国际研究生院举行</a></div>
                </li>
                <li>
                    <div class="time">2024.03.20</div>
                    <div class="name"><a href="info/1180/110257.htm">校团委、学生社区中心联合开展学生宿舍清洁和安全自查活动</a></div>
                </li>

                <li>
                    <div class="time">2024.03.19</div>
                    <div class="name"><a href="info/1180/110245.htm">中国工程院外籍院士安东尼奥·米克斯做客清华海外名师讲堂
                            阐释“组织工程中用于生物分子和细胞输送的生...</a>
                    </div>
                </li>


            </ol>
        </div>
        <div class="list">
            <div class="title">
                <h2>清华思客</h2>
                <a class="more" href="news/qhsk.htm">更多 &gt;</a>
            </div>
            <ul>
                <li>
                    <div class="time">2024.03.20</div>
                    <div class="name"><a href="info/1662/110253.htm">肖贵清：抓住思政课教师队伍建设这个关键</a></div>
                </li>
                <li>
                    <div class="time">2024.03.19</div>
                    <div class="name"><a href="info/1662/110220.htm">艾四林：以“八个相统一”引领新时代思政课改革创新</a></div>
                </li>

                <li>
                    <div class="time">2024.03.18</div>
                    <div class="name"><a href="info/1662/110179.htm">林来梵：中国宪法学研究方法评辨：过去、现在与未来</a></div>
                </li>

            </ul>
        </div>
    </div>
    <div class="wal foot-link">

        <div class="list">
            <dl>
                <dt>
                    <h4>校园参观</h4>
                </dt>

                <dd><a href="zjqh/syxx/xyjt.htm">校园公交车</a></dd>

                <dd><a href="zjqh/syxx/qhxl.htm">清华校历</a></dd>

                <dd><a href="zjqh/xyfg/xydt.htm">校园地图</a></dd>

            </dl>
        </div>
</body>

</html>

运行结果：

img

  • 写回答

1条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-03-21 16:45
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    问题分析：
    1. 右边距应该怎样添加
    2. 无序列表和有序列表没项目符号 解决方案：
    3. 在样式表中添加右边距的CSS属性。可以在容器的基础上添加 padding-right 或者 margin-right 属性，或者给元素自身添加 margin-right 属性。根据具体布局和设计需要选择最合适的方法，可以通过不断尝试调整来找到最佳方案。 案例： 如果想让整个列表区域与页面的右边框保持一定的距离，可以给容器加上 margin-right 属性：
    .container {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}
    1. 无序列表和有序列表没项目符号，需要给列表添加 list-style 属性，并指定为一个有效的值。例如，列表中的小点或数字：
    ul, ol {
  list-style: disc; /* 小点 */
  /* list-style: circle; */ /* 空心圆点 */
  /* list-style: square; */ /* 方块 */
  /* list-style: decimal; */ /* 数字 */
  /* list-style: lower-alpha; */ /* 小写字母 */
  /* list-style: upper-alpha; */ /* 大写字母 */
  /* list-style: lower-roman; */ /* 小写罗马数字 */
  /* list-style: upper-roman; */ /* 大写罗马数字 */
}

    注意，在样式表中设置list-style属性时，应当同时作用于无序列表和有序列表，或者分别设置两者的样式。 案例： 给无序列表和有序列表添加小点（disc）：

    ul, ol {
  list-style: disc;
}

    给无序列表和有序列表添加数字（decimal）：

    ul, ol {
  list-style: decimal;
}

    代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      margin-right: 10px;
    }
    ul, ol {
      list-style: disc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="list">
      <div class="title">
        <h2>清华广角</h2>
        <a href="news/qhgj.htm">更多 &gt;</a>
      </div>
      <ol>
        <li>
          <div class="time">2024.03.20</div>
          <div class="name">
            <a href="info/1180/110261.htm">城市发展与生态保育</a>校友交流研讨会在深圳国际研究生院举行
          </div>
        </li>
        <li>
          <div class="time">2024.03.20</div>
          <div class="name">
            <a href="info/1180/110257.htm">校团委、学生社区中心联合开展学生宿舍清洁和安全自查活动</a>
          </div>
        </li>
        <li>
          <div class="time">2024.03.19</div>
          <div class="name">
            <a href="info/1180/110245.htm">中国工程院外籍院士安东尼奥·米克斯做客清华海外名师讲堂 阐释“组织工程中用于生物分子和细胞输送的生...</a>
          </div>
        </li>
      </ol>
    </div>
    <div class="list">
      <div class="title">
        <h2>清华思客</h2>
        <a class="more" href="news/qhsk.htm">更多 &gt;</a>
      </div>
      <ul>
        <li>
          <div class="time">2024.03.20</div>
          <div class="name">
            <a href="info/1662/110253.htm">肖贵清：抓住思政课教师队伍建设这个关键</a>
          </div>
        </li>
        <li>
          <div class="time">2024.03.19</div>
          <div class="name">
            <a href="info/1662/110250.htm">清华大学纪委书记卢黎明调研教育“三治”工作</a>
          </div>
        </li>
        <li>
          <div class="time">2024.03.19</div>
          <div class="name">
            <a href="info/1662/110248.htm">清华大学第二届校友微信春季活动举行</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 3月29日
  • 已采纳回答 3月21日
  • 创建了问题 3月21日