如何移动标题下的水平线?

Question

我试图将水平条置于文本标题下方，在容器<div>内部，但水平条只是在宽度中起作用，但没有移动到位置…

我在犹豫，我应该创建一个更多的div。我一直试图移动hr顶部与vh甚至margin，但这是不可行的。

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

我希望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>

Answer 1

试试这个

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

改变margin top和width和margin left根据你的div宽度和高度

Answer 2

您也可以完全取消水平标尺(线)，并使用CSSborder-top。我试了一下，得到了这个:

body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>