Question

任何人都可以帮我解决问题。我试图在<hr>上对齐箭头，但有些箭头似乎无法正常工作。

HTML：

<div class = "horizontal-timeline">
    <div class="arrow-up" style = "margin-left: 20%;"></div>

    <div class="arrow-up" style = "margin-left: 60%;"></div>

    <hr>
    <div class="arrow-down" style = "margin-left: 40%;"></div>
    <div class="arrow-down" style = "margin-left: 80%;"></div>
</div>

CSS：

.horizontal-timeline hr {
  border: none;
  height: 6px;
  /* Set the hr color */
  color: #29AAE3; /* old IE */
  background-color: #29AAE3; /* Modern Browsers */
  margin: 0;
}
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  vertical-align: baseline;
  border-bottom: 20px solid #29AAE3;
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #29AAE3;
}

Answer 1

将元素放置在与容器相关的位置更容易。抛弃<hr>，并使用horizontal-timeline作为线本身，然后将箭头绝对定位于它：

＆＃13;

body {
  padding-top: 30px;
}

.horizontal-timeline {
  position: relative;
  height: 6px;
  background: #29AAE3;
  margin: 0;  
}

.arrow-up, .arrow-down {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  vertical-align: baseline;
}

.arrow-up {
  top: -20px;
  border-bottom: 20px solid #29AAE3;
}

.arrow-down {
  bottom: -20px;
  border-top: 20px solid #29AAE3;
}

＆＃13;

<div class="horizontal-timeline">
  <div class="arrow-up" style="left: 20%;"></div>
  <div class="arrow-up" style="left: 60%;"></div>
  <div class="arrow-down" style="left: 40%;"></div>
  <div class="arrow-down" style="left: 80%;"></div>
</div>

＆＃13;

Answer 2

试试这个

使div元素显示：inline-block;因为div元素默认是占用整页宽度的块级元素。

接下来将位置设置为相对位置并相应调整..

CSS

    .horizontal-timeline hr
    {
        border: none;
        height: 6px;
        /* Set the hr color */
        color: #29AAE3; /* old IE */
        background-color: #29AAE3; /* Modern Browsers */
        margin: 0;
    }
    .arrow-up {
      width: 0; 
      height: 0; 


border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  vertical-align: baseline;
  border-bottom: 20px solid #29AAE3;
  display:inline-block;
  position: relative;
  top:4px;
}
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #29AAE3;
  display:inline-block;
}

HTML

<div class = "horizontal-timeline">
                <div class="arrow-up" style = "margin-left: 20%;"></div>

                <div class="arrow-up" style = "margin-left: 40%;"></div>

                <hr>
                <div class="arrow-down" style = "margin-left: 40%;"></div>
                <div class="arrow-down" style = "margin-left: 40%;"></div>
            </div>

希望这会有所帮助..

Answer 3

只需将3 css添加到.arrow-up类

display:inline-block;
position: relative;
top:4px;

1 css到.arrow-down类

display:inline-block;

并在HTML中修改margin-left，如下所示

<div class="arrow-up" style = "margin-left: 20%;"></div>
<div class="arrow-up" style = "margin-left: 40%;"></div>
<hr>
<div class="arrow-down" style = "margin-left: 40%;"></div>
<div class="arrow-down" style = "margin-left: 40%;"></div>

您将获得输出

Answer 4

您应该向父position:relative;添加属性儿童display:inline-block; position:absolute;。将top: 10px;添加到.arrow-up课程。

Codepen

Answer 5

当您想要在网页中相对于彼此放置元素时，您需要使用position css属性。在这里，它们出现在不同的高度，因为分裂不能重叠主要是您需要使用position:relative值。查找有关CSS propery的更多信息position here 。

以下是代码段。

body {
  height: 1000px;
}

.red {
  background-color: red;
  width: 100%;
  height: 150px;
}

.green {
  background-color: green;
  width: 100%;
  height: 200px;
}

.horizontal-timeline hr {
  border: none;
  height: 6px;
  /* Set the hr color */
  color: #29AAE3;
  /* old IE */
  background-color: #29AAE3;
  /* Modern Browsers */
  margin: 0;
}

.arrow-up {
  position: relative;
  display: inline-block;
  top: 4px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  vertical-align: baseline;
  border-bottom: 20px solid #29AAE3;
}

.arrow-down {
  position: relative;
  display: inline-block;
  top: 0px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #29AAE3;
}

<body>
  <div class="green"></div>
  <div class="horizontal-timeline">
    <div class="arrow-up" style="margin-left: 10%;"></div>

    <div class="arrow-up" style="margin-left: 30%;"></div>

    <hr>
    <div class="arrow-down" style="margin-left: 30%;"></div>
    <div class="arrow-down" style="margin-left: 30%;"></div>
  </div>
  <div class="red"></div>
</body>

Answer 6

使用CSS position属性：make class＆＃34; horizontal-timeline＆＃34; - ＆＃34;位置：相对;＆＃34;和箭头＆＃34;位置：绝对;＆＃34;使用＆＃34; top：x px＆＃34;到你的时间线div根据需要： https://codepen.io/Sneha_05/pen/BZdWeE

<强> HTML

<div class = "horizontal-timeline">
    <div class="arrow-up" style = "margin-left: 20%;"></div>            
    <div class="arrow-up" style = "margin-left: 60%;"></div>                
    <hr>
    <div class="arrow-down" style = "margin-left: 40%;"></div>
    <div class="arrow-down" style = "margin-left: 80%;"></div>
</div>

<强> CSS

 .horizontal-timeline hr {
   border: none;
   height: 6px;
   /* Set the hr color */
   color: #29AAE3; /* old IE */
   background-color: #29AAE3; /* Modern Browsers */
   margin: 0;
   position:relative;
   top:20px;
   }
.arrow-up {
   width: 0; 
   height: 0; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   vertical-align: baseline;
   border-bottom: 20px solid #29AAE3;
   position:absolute;
   }
.arrow-down {
   width: 0; 
   height: 0; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 20px solid #29AAE3;
   position:absolute;
   top:34px;
   }

在hr上对齐箭头

6 个答案: