时间戳

首页 > 解决方案 > 如何移动标题下方的水平线？

html - 如何移动标题下方的水平线？

问题描述

我试图将水平条放在容器内部的文本标题下方，<div>但水平条只会影响宽度，但不会向上移动到位置......

我正在犹豫是否应该再创建一个 div。我一直试图hr用vhor even向上移动margin，但这不可行。

我想要的是移动hr标题下方。

我希望人力资源如何上升

原来的

.topcon {
  background-color: #f6f5f5;
  position: relative;
  width: 250px;
  height: 250px;
  border: 15px;
  padding: 50px;
  margin: 180px auto 150px auto;
  border-radius: 20px;
}

.pattern-card {
  position: relative;
  right: 50px;
  border-radius: 20px 20px 0px 0px;
  bottom: 50px;
}

.victor {
  position: relative;
  background-color: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  margin-left: 50px;
  margin-right: auto;
  bottom: 110px;
  width: 50%;
}

.user-name {
  position: absolute;
  width: 30%;
  left: 20vh;
  top: 40vh;
  text-align: center;
  display: inline;
  margin: 0 auto 0 auto;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 700;
  color: #2d3248;
  font-size: 18px;
}

.user-age {
  position: absolute;
  width: 20%;
  right: 15.5vh;
  top: 40vh;
  text-align: center;
  display: inline;
  margin: 0 auto 0 auto;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 700;
  color: #969696;
  font-size: 18px;
}

.user-location {
  position: absolute;
  width: 25%;
  left: 22.5vh;
  top: 45.5vh;
  text-align: center;
  display: inline;
  margin: 0 auto 0 auto;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 700;
  color: #969696;
}

hr {
  border-top: 1px solid #969696;
  width: 100%;
  bottom: 50vh;
}
<div class="topcon">
  <img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
  <img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
  <p class="user-name">Victor Crest</p>
  <p class="user-age">26</p>
  <p class="user-location">London</p>
  <hr /> 80K Followers 803K Likes 1.4K Photos
</div>

标签： htmlcss

解决方案

试试这个

hr{
  border-top: 1px solid #969696;
  margin-left: -50px;
  width: 350px;
 margin-top: -15px;
}

根据您的 div 宽度和高度更改margin topandwidth和margin left

推荐阅读