我怎样才能让记号移到文本短行的左边(见截图)HTML&;CSS

我怎样才能让记号移到文本短行的左边(见截图)HTML&;CSS,html,css,ionicons,Html,Css,Ionicons,你好 正如您从我的屏幕截图中看到的,我正在尝试将蓝色记号(一种字体样式)放在文本的左侧,而不是像屏幕截图中那样放在文本的上方。 这是我的代码,忽略了我还有ionicons v2 font():) 我写的帖子不多,所以请随意询问更多信息 谢谢大家 。每月捐款部分{ 背景色:#434343; } .计划箱{ 背景色:#6969; 边界半径:5px; 宽度:90%; 左缘:5%; } .图则箱分区{ 填充:15px; 边框底部:1px实心#424242; } .计划箱分区:最后一个孩子{ 文本对齐


你好
正如您从我的屏幕截图中看到的,我正在尝试将蓝色记号(一种字体样式)放在文本的左侧,而不是像屏幕截图中那样放在文本的上方。
这是我的代码,忽略了我还有ionicons v2 font():)
我写的帖子不多,所以请随意询问更多信息
谢谢大家

。每月捐款部分{
背景色:#434343;
}
.计划箱{
背景色:#6969;
边界半径:5px;
宽度:90%;
左缘:5%;
}
.图则箱分区{
填充:15px;
边框底部:1px实心#424242;
}
.计划箱分区:最后一个孩子{
文本对齐:居中;
}
1.计划价格{
字体大小:190%;
边缘底部:10px;
字号:200;
颜色:#00BFFE;
}
1.计划价格跨度{
字体大小:70%;
字体大小:300;
}
.保险箱{
列表样式:无;
}
.图框ul li{
字体大小:70%;
填充:5px0;
}
.行{
缩放:1;/*适用于IE 6/7(触发器布局)*/
}
.罗:之前,
.罗:之后{
内容:“;
显示:表格;
}
.罗:之后{
明确:两者皆有;
}
/*网格列设置=========================================================================================================================================================================================================================================================================================================================================================================*/
上校{
显示:块;
浮动:左;
利润率:1%01%1.6%;
}
.col:first child{margin left:0;}/*除IE6和更低版本之外的所有浏览器*/
/*删除边距,因为所有边距都达到480像素的全宽*/
@仅介质屏幕和(最大宽度:480px){
col{
/*利润率:1%01%0%*/
保证金:0;
}
}
/*三个网格======================================================================================================================*/
.第3页,共3页{
宽度:100%;
}
.第2页,共3页{
宽度:66.13%;
}
.第1页,共3页{
宽度:32.26%;
}

保证每月捐款
黄金

每月200英镑以上

  • 团队签署的执行信函
  • 独家访问
  • 独家
  • 塞德·康塞卡特,利奥·埃吉特·比本杜姆

有两种方法可以在列表项中创建这样的图标

  • 您可以向
  • 中的
    元素添加
    display:inline
    ,这将使其成为列表项的一部分。然后,如果您想将内容推离图标一点,您可以为其添加边距
  • 如果您不喜欢用图标包装文本,另一种方法是将其设置为
    position:absolute
    ,然后将图标放置在
  • 中,该图标使用
    position:relative
    和填充在左侧为图标留出额外空间
  • 下面是两个示例的片段:

    。每月捐款部分{
    背景色:#434343;
    }
    .计划箱{
    背景色:#6969;
    边界半径:5px;
    宽度:90%;
    左缘:5%;
    }
    .图则箱分区{
    填充:15px;
    边框底部:1px实心#424242;
    }
    .计划箱分区:最后一个孩子{
    文本对齐:居中;
    }
    1.计划价格{
    字体大小:190%;
    边缘底部:10px;
    字号:200;
    颜色:#00BFFE;
    }
    1.计划价格跨度{
    字体大小:70%;
    字体大小:300;
    }
    .保险箱{
    列表样式:无;
    }
    .图框ul li{
    字体大小:70%;
    填充:5px0;
    }
    /*新CSS*/
    .计划箱ul li i{
    显示:内联;
    右边距:5px;
    }
    /*结束新CSS*/
    .行{
    缩放:1;/*适用于IE 6/7(触发器布局)*/
    }
    .罗:之前,
    .罗:之后{
    内容:“;
    显示:表格;
    }
    .罗:之后{
    明确:两者皆有;
    }
    /*网格列设置=========================================================================================================================================================================================================================================================================================================================================================================*/
    上校{
    显示:块;
    浮动:左;
    利润率:1%01%1.6%;
    }
    .col:first child{margin left:0;}/*除IE6和更低版本之外的所有浏览器*/
    /*删除边距,因为所有边距都达到480像素的全宽*/
    @仅介质屏幕和(最大宽度:480px){
    col{
    /*利润率:1%01%0%*/
    保证金:0;
    }
    }
    /*三个网格======================================================================================================================*/
    .第3页,共3页{
    宽度:100%;
    }
    .第2页,共3页{
    宽度:66.13%;
    }
    .第1页,共3页{
    宽度:32.26%;
    }
    
    保证每月捐款
    黄金
    

    每月200英镑以上

    • 团队签署的执行信函
    • 独家访问
    • 独家
    • 塞德·康塞卡特,利奥·埃吉特·比本杜姆

    非常感谢您!我个人喜欢第一个。:)