[已解决]html前台显示问题

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

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

      {% for form in deat %}
   {{ form.label }}
         {% endfor %}
   </span>
         </div></div>
   
@6XCM4YM}CQN}E(}(N~60.png

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

最佳答案

月排行榜 / 总排行榜

陶远航

2023-4-20 15:29:38

你可以在该 <div> 标签中加入 style 属性，设置内边距(padding)或外边距(margin)来控制间隔。例如，增加左侧和右侧的内边距:

<div class="panel panel-default" style="padding: 0 10px;">
复制代码

这将在左侧和右侧增加 10 像素的内边距，从而为数据增加一定的间隔。你可以根据需要调整内边距的值。

跳转到最佳答案楼层

陶远航 · 发表于 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">

   

      <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>

   

{% 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">

   

      <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>

   

{% endblock %}

复制代码

这两种方法都可以给 `form.label` 之间添加横向间隔。选择其中一个方法，并根据你的需求调整间隔值。

账号		自动登录	找回密码
密码			立即注册