下面想利用padding来使得item的内容和左边产生一点间距
#m_leftList{
outline:none;
font-size:17px;
}
#m_leftList::item{
height:45px;
outline:none;
color:white;
padding-left:10px;/*指定左边距*/
}
#m_leftList::item:hover,
#m_leftList::item:selected{
background-color:#d23337;/*鼠标滑过或者被选择变红*/
}
可item在正常状态下这个效果并没有生效,不知道是不是qss的bug
这个指定的padding只有在鼠标划过或者item被选择时生效了
如下:
解决方案,通过指定边框border的宽度来替代padding,然后指定边框的颜色为透明
border属性在item正常状态下是会生效的
如下:
#m_leftList{
outline:none;
font-size:17px;
}
#m_leftList::item{
height:45px;
outline:none;
color:white;
border-left:10px solid transparent;/*透明的边框来模拟padding*/
}
#m_leftList::item:hover,
#m_leftList::item:selected{
background-color:#d23337;
}
可以看到,这个空隙在各个状态都有了
--------------------------------------------------------------------
如何指定图片和文本的间距
文本开头增加空格
----------------------------------------------------------------------
最新结果:
需要指定border后,padding才会生效,不想要border可以将border设为none ,否则padding不生效,但是border一定要写
#m_leftList{
outline:none;
font-size:17px;
}
#m_leftList::item{
height:45px;
outline:none;
color:white;
border:none;/*一定要先指定border,哪怕不用*/
padding:2px 10px;/*然后padding才会生效*/
margin:2px 0px;
}
#m_leftList::item:hover,
#m_leftList::item:selected{
background-color:#d23337;
}