从状态栏中删除填充

Question

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

添加另一个范围并在类

中添加填充

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

</div>

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

Answer 3

从list删除填充：

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