如何移动hr元素的位置？

Question

<div class='uk-padding-large uk-padding-remove-top'>
      <div style="width: 100%; height: 20px; border-bottom: 1px solid #2f59a9">
        <span class='uk-text-bold' style="font-size: 10px; background-color: white; padding: 10px; color: #2f59a9">
          PRODUCTS
        </span>
      </div>
    </div>

我想在产品字词的右上方输入小时数

产品-----------------（按钮）

Answer 1

更改包含span文本的PRODUCTS的位置应该可以解决问题。 请参见下面的代码。我已将position:relative;top:9px;添加到span。

<div class='uk-padding-large uk-padding-remove-top'>
  <div style="width: 100%; height: 20px; border-bottom: 1px solid #2f59a9">
    <span class='uk-text-bold' style="font-size: 10px; background-color: white; padding: 10px; color: #2f59a9;position:relative;top:9px;">
          PRODUCTS
        </span>
  </div>
</div>

Answer 2

.uk-text-bold {font-size: 10px; background-color: white; padding: 5px; color: #2f59a9}
.uk-padding-large > div { width: 100%; height: 20px; position:relative;}
.uk-padding-large > div:after{ content:""; height:1px; border-bottom:solid 1px #2f59a9; position:absolute; top:0; bottom:0; margin:auto;  width:100%; }

<div class='uk-padding-large uk-padding-remove-top'>
      <div style="">
        <span class='uk-text-bold' >
          PRODUCTS
        </span>
      </div>
    </div>

Answer 3

.product-container{
display:flex;
width:500px;
    
}

.product-name{
flex-shrink:1!important;
  padding:0 .5rem;
}

.product-hr{
width:100%;
}

.product-hr:after{
  content:'';
  width:100%;
  height:2px;
  display:block;
  margin-top:5px;
  background:red;
}

.product-btn{
  flex-shrink:1!important;
  padding:0  .5rem;
}

<div class="product-container">
  <div class="product-name">Product </div>
  <div class="product-hr"></div>
  <div class="product-btn">
    <button>Button</button>
    
  </div>
  
</div>

Answer 4

email_subject