从状态栏中删除填充

Question

我想从状态栏中删除填充并在文本上填充填充。

我在状态栏中添加了手动padding: 0;，但它对它没有任何影响。

.list { 
 
    padding: 20px 0 20px; 
 
    border: 1px #666666 solid; 
 
    width: 250px; 
 
} 
 

 
.list > .status-bar { 
 
    background-color: red; 
 
    width: 20px; 
 
    display: inline-block; 
 
}

<div class="list"> 
 
    <span class="status-bar">&nbsp;</span>Test 1 
 
</div>

Answer 1

您可以使用此代码

HTML：

<div class="list"> 
    <span class="status-bar">&nbsp;</span>Test 1 
</div> 

CSS：

.list { 
    padding:0; 
    border: 1px #666666 solid; 
    width: 250px; 
} 

.list > .status-bar { 
    background-color: red; 
    width: 20px; 
    padding:20px; 
    display: inline-block; 
    height:100%; 
} 

https://jsfiddle.net/bfktcehb/11/

Answer 2

取下list填充：

https://jsfiddle.net/bfktcehb/8/

Answer 3

添加另一个跨度，并把填充类

<div class="list"> 
    <span class="status-bar">&nbsp;</span> 
    <span clsss="l1"> Test 1 </span> 

</div> 

.l1{ 
    padding: 0px 115px 0px 0px; 
}