Question 255575 in Html Question posted in
Some basic documentation can be found here.

Html – Want to make a horizontal line, but shows a vertical line

please don`t close my question,we really need some help!

I have a question of using the </hr> code to make a horizontal line.

I entered the </hr> code,but its not work,instead appered vertical line.I think maybe was the problem of other code Influenced that.Could anyone help me to check the code down below please?See whats wrong with it,Thank you so much!

I used the feversocial platform for easy web design, one of which is to make changes directly with code, but the effect I want is to make changes to CSS, I asked the company, and they only allow us to make changes with HTML, so CSS cannot be used.

Now

Want to do itThis one was altered in Photoshop.

feversocial code view

<div style="display:flex; flex-wrap: wrap; margin:0 -8px;">
    <div style="flex:1; min-width:24vmax; margin:1vw;">
        <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
            <div style="padding:145px 0 10px 0;">
                <p style="text-align: right;">梁老師</p>
            </div>
        </a>
    </div>

    <hr>

    <div style="flex:1; min-width:24vmax; margin:1vw;">
        <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
            <div style="padding:35px 0 10px 0;">
                <p style="text-align: right;">劉易嫣</p>
            </div>
        </a>
    </div>
Tags:

2

Answers


  1. 0

    Are You trying to achieve something like this? Please Check by running the snippet.

    .parent_item{
  gap:15px;
  display:flex;
}

.child_item{
  border-bottom:1px solid #333;
}
    <div class="parent_item">
        <div class="child_item" style="flex:1; min-width:24vmax; margin:1vw;">
            <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
                <div style="padding:145px 0 10px 0;">
                    <p style="text-align: right;">梁老師</p>
                </div>
            </a>
        </div>
    
      
    
        <div  class="child_item" style="flex:1; min-width:24vmax; margin:1vw;">
            <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
                <div style="padding:35px 0 10px 0;">
                    <p style="text-align: right;">劉易嫣</p>
                </div>
            </a>
        </div>
      
      <div  class="child_item" style="flex:1; min-width:24vmax; margin:1vw;">
            <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
                <div style="padding:35px 0 10px 0;">
                    <p style="text-align: right;">劉易嫣</p>
                </div>
            </a>
        </div>
    Login or Signup to reply.
  2. 0

    Instead of using <hr>, you can use border-bottom element style.

    Please check the snippet below:

    <div style="display:flex; flex-wrap: wrap; margin:0 -8px;">
  <div style="flex:1; min-width:24vmax; margin:1vw; border-bottom: 1px solid black">
    <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
      <div style="padding:145px 0 10px 0;">
        <p style="text-align: right;">梁老師</p>
      </div>
    </a>
  </div>


  <div style="flex:1; min-width:24vmax; margin:1vw; border-bottom: 1px solid black">
    <a class="link" href="https://www.xz.com.tw/Courses_Drums-15339" rel="noopener noreferrer" style="display: block; background-color: #fff;padding-top:10%; padding-bottom:100%; height:0;">
      <div style="padding:35px 0 10px 0;">
        <p style="text-align: right;">劉易嫣</p>
      </div>
    </a>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search