CODEWITHSUNDEEP
javascripthtmlcss
user7988893
user7988893

Reputation:

How to put the hr line on the specified position in div?

div.test{width:100px;height:100px;border:1px solid red;}

The css will create a box with 100px width and 100px height .
How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?

Upvotes: 0

Views: 2480

Answers (4)

苏小志
苏小志

Reputation: 1

hr {
  margin-top: -50px;
  width: 100px;
  margin-left: 0px;
}

Upvotes: 0

Tony D
Tony D

Reputation: 194

What if you gave your hr a margin-top of 50%?

CSS

#line{
    margin-top:50%;
}

HTML

<hr id="line" />

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53684

How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?

Use a pseudo element to draw the horizontal line absolutely positioned relative to the parent.

div.test {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}

.test::after {
  content: '';
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
<div class="test"></div>

Upvotes: 3

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

Position the <hr> accordingly.

div.test{width:100px;height:100px;border:1px solid red;}
hr {
  position: relative;
  z-index: -1;
  margin-top: -50px;
  width: 100px;
  margin-left: 0px;
}
<div class="test"></div>
<hr>

Upvotes: 0

Related Questions