如何在 Django 中正确使用 CSS 在侧边栏中放置边距>答案

【问题标题】：How to put a margin in sidebar using CSS properly in Django>如何在 Django 中正确使用 CSS 在侧边栏中放置边距>
【发布时间】：2022-11-15 14:36:28
【问题描述】：

我尝试使用此代码将边距分隔文本和图标


{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{% static 'css/styles.css'%}">
    <!-- <link href="{% static 'css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="{% static '/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> -->
    <link href="{% static 'css/bootstrap.min.css'%}" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    <title>Document</title>
</head>
<body>
    <div class="sidebar">
        <header>Menu</header>
        <a href="#" class="active"><i class="fas fa-qrcode"></i><span>Dashboard</span></a>
        <a href="#"><i class="fas fa-link"></i><span>Data Entry</span></a>
        <a href="#"><i class="fas fa-stream"></i><span>List</span></a>
    </div>
</body>
</html>

CSS代码

a.active,a:hover{
    border-left: 5px solid #019321;
    color: #bfeb74;
  }

.sidebar a i{
    margin-right: 300px;

enter image description here

它应该看起来像这样。与 codepen.io 中的代码相同。 enter image description here

【问题讨论】：

查看我的答案

标签： css django

【解决方案1】：

请向跨度添加填充。

span { padding-left: 20px; }

【讨论】：

【解决方案2】：

我认为这是因为你在内联标签中应用了边距（？）

a.active,a:hover{
    border-left: 5px solid #019321;
    color: #bfeb74;
  }

.sidebar a i {
   margin: 300px;
}

.sidebar a * {
    display: block;
}

【讨论】：

【解决方案3】：

只需您可以这样更改：

而不是这个：

.sidebar a i{
    margin-right: 300px;

尝试这个：

.sidebar > a > i {
    margin-right: 300px;

这将完美无缺。

注意：添加像素值你想要多少

【讨论】：