负边距用于将标签放在div之上

Question

我知道我错过了一些基本的东西，谁想要谦卑我？

我正在拍摄的是什么;

我被困在哪里;

.labels {
  display: inline-block;
  color: #9e9e9e;
  text-align: center;
  border-top: #9e9e9e 1px solid;
  border-left: #9e9e9e 1px solid;
  border-right: #9e9e9e 1px solid;
  height: 10px;
}
.labels span {
  margin-top: -15px;
}
#label1 {
  margin-right: 20px;
  width: 253px;
}
#label2 {
  width: 480px;
}

<div>
   <div id="label1" class="labels">
      <span>Label 1</span>
   </div>
   <div id="label2" class="labels">
      <span>Label 2</span>
   </div>
</div>

CodePen

谢谢，在xaml世界中长时间杀死了生锈。 ;）

Answer 1

span标记用于默认的内联元素，因此填充或边距等属性无效。您需要更改该行为：

.labels span {
  display:block;
  margin-top: -15px;
}

CodepenDemo

Answer 2

将margin-top添加到，标签类，并使跨度位置固定如下：

＆＃13;

＆＃13;

.labels {
  display: inline-block;
  color: #9e9e9e;
  text-align: center;
  border-top: #9e9e9e 1px solid;
  border-left: #9e9e9e 1px solid;
  border-right: #9e9e9e 1px solid;
  height: 10px;
  margin-top: 30px;
}
.labels span {
    margin-top: -25px;
    position: fixed;
}
#label1 {
  margin-right: 20px;
  width: 253px;
}
#label2 {
  width: 480px;
}

＆＃13;

<div>
   <div id="label1" class="labels">
      <span>Label 1</span>
   </div>
   <div id="label2" class="labels">
      <span>Label 2</span>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需添加一个display：block to span !!

& span {
    display: block;
    margin-top: -20px;
  }

Answer 4

我不建议使用负边距（因为在某些情况下可能会导致问题）。更好的方式：

＆＃13;

＆＃13;

.labels {
  display: inline-block;
  text-align: center;
  width:50%;
  float:left;
}
.labels .borders{
  border:0px solid #9e9e9e; 
  border-width: 1px 1px 0px 1px;
  display: inline-block;
  color: #9e9e9e;
  height: 10px;
  width:90%;
  margin:0 5%;
}

＆＃13;

<div>
   <div id="label1" class="labels">
      <span>Label 1</span>
      <span class="borders"></span>
   </div>
   <div id="label2" class="labels">
      <span>Label 2</span>
      <span class="borders"></span>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;