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

fae0ux8s 于 2022-11-18 发布在 Go

关注(0)|答案(3)|浏览(173)

我试着用这段代码用边距来分隔文本和图标

{% 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
它应该看起来像这样。与放入codepend.io. enter image description here的代码相同

django

来源：https://stackoverflow.com/questions/74441292/how-to-put-a-margin-right-in-sidebar-using-css-properly-in-django

3条答案

按热度按时间

ogq8wdun1#

请向范围中添加填充。

span { padding-left: 20px; }

赞(0）回复(0）举报 2022-11-18

vwkv1x7d2#

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

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

.sidebar a i {
   margin: 300px;
}

.sidebar a * {
    display: block;
}

赞(0）回复(0）举报 2022-11-18

hfyxw5xn3#

简单地你可以这样改变：
而不是：

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

试试看：

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

这将工作完美。
注意：添加像素值多少你想要的

赞(0）回复(0）举报 2022-11-18

我来回答

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

3条答案

相关问题

热门标签

最新问答