tengke 发表于 2023-4-20 15:29:37

html前台显示问题

{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息</div>
    <div class="panel panel-default"">

      {% for form in deat %}
       {{ form.label }}
         {% endfor %}
      </span>
         </div></div>
      <!-- Table -->

我想让红框里面的数据有一定的间隔我要怎么修改呢

陶远航 发表于 2023-4-20 15:29:38

你可以在该 <div> 标签中加入 style 属性，设置内边距(padding)或外边距(margin)来控制间隔。例如，增加左侧和右侧的内边距:
<div class="panel panel-default" style="padding: 0 10px;">
这将在左侧和右侧增加 10 像素的内边距，从而为数据增加一定的间隔。你可以根据需要调整内边距的值。

wp231957 发表于 2023-4-20 15:46:24

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8" />
      <style type="text/css">
            .wp{
                display: inline-block;
                margin-left: 300px;
            }
      </style>
    </head>
    <body>
      <div class="wp">
            吉林省         
      </div>
      <div class="wp">
            辽宁省         
      </div>
      <div class="wp">
            黑龙江省         
      </div>
    </body>
</html>

tengke 发表于 2023-4-20 16:00:20

django使用 ModelForm 这个不行

歌者文明清理员 发表于 2023-4-20 19:37:46

tengke 发表于 2023-4-20 16:00
django使用 ModelForm 这个不行

@wp231957 这位新人没有回复你的帖子，但是希望继续求助

wp231957 发表于 2023-4-20 20:44:42

歌者文明清理员 发表于 2023-4-20 19:37
@wp231957 这位新人没有回复你的帖子，但是希望继续求助

第江狗我不熟悉啊

歌者文明清理员 发表于 2023-4-20 20:49:31

wp231957 发表于 2023-4-20 20:44
第江狗我不熟悉啊

@isdkz

isdkz 发表于 2023-4-20 20:51:22

歌者文明清理员 发表于 2023-4-20 20:49
@isdkz

没理解他是想要上下间隔还是左右间隔

歌者文明清理员 发表于 2023-4-20 20:56:19

isdkz 发表于 2023-4-20 20:51
没理解他是想要上下间隔还是左右间隔

你回复我的帖子，楼主是看不到滴

tengke 发表于 2023-4-21 11:27:18

isdkz 发表于 2023-4-20 20:51
没理解他是想要上下间隔还是左右间隔

横着显示 有一定间隔

isdkz 发表于 2023-4-21 11:38:17

要给 `form.label` 之间添加横向间隔，你可以使用内联样式或者 CSS 类来调整。这里有两种方法：

方法 1：使用内联样式
在 `<span>` 标签中添加 `style` 属性，并设置 `margin-right` 值。这将给每个 `form.label` 添加右边距。

{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息</div>
    <div class="panel panel-default"">

      {% for form in deat %}
            <span style="margin-right: 20px;">{{ form.label }}</span>
      {% endfor %}
      </div></div>
      <!-- Table -->
{% endblock %}


方法 2：使用 CSS 类
在 CSS 文件中创建一个新的类（例如 `form-label-spacing`），并设置 `margin-right` 值。然后在 `<span>` 标签中添加这个新的类。

CSS 文件（例如 styles.css）：
.form-label-spacing {
margin-right: 20px;
}


HTML 文件：
{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息</div>
    <div class="panel panel-default"">

      {% for form in deat %}
            <span class="form-label-spacing">{{ form.label }}</span>
      {% endfor %}
      </div></div>
      <!-- Table -->
{% endblock %}


这两种方法都可以给 `form.label` 之间添加横向间隔。选择其中一个方法，并根据你的需求调整间隔值。
页: [1]
查看完整版本: html前台显示问题