时间戳

首页 > 解决方案 > 在两个箭头之间添加文本

html - 在两个箭头之间添加文本

问题描述

我有以下 HTML 和 CSS，它们创建了两个 div 和两个箭头，如下所示。

        .arrow{
         stroke:black;
         stroke-width:3; 
         marker-end:url(#arrow)
       }
       .arrowYellow{
        stroke: #FFFF00;
       }
      .arrowGreen{
      stroke: #21e324;
       }
    .taskList{
      border: 3px solid black;
      margin: auto;
      width: 200px;
      font-size: 25px;
    }
    .container{
      display: -webkit-flex;
      display: flex;
      flex-wrap:wrap;
    }
    .task{
      flex: 1 1 0;
      border: 3px solid #808080;
      padding: 10px;
      font-size: 20px;
      min-height: 52px;
      overflow: hidden;
    }
    .container .task1 + .task2 {
      margin-left: 300px;
    }
    .task3{
      border-left: none;
      border-right: none;
    }
    li{ 
      list-style-type: none;
    }
    <div class="container">
     <div class="task task1 text-center">Task Name1</div>
     <svg height="100%" width="30%">
     <defs>
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
    orient="auto">
        <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
    </marker>
    </defs>

    <line x1="0%" y1="50%" x2="20%" y2="50%" class="arrow arrowGreen" />
  
    <defs>
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
    orient="auto">
      <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
    </marker>
    </defs>

     <line x1="100%" y1="50%" x2="80%" y2="50%" class="arrow arrowGreen" />
    </svg>
    <div class="task task2 text-center">Task Name2</div>
    </div>

我想知道如何在两个指向对方的绿色箭头之间添加另一个 div。这可能吗？还有其他方法吗？

我真的很感激任何帮助

标签： htmlcss

解决方案

您的原始解决方案（以及其他人在此处提供的变体）都将 SVG 直接放在“容器”部门下，您的文本部门也在其中 - 使得对齐所有内容和控制位置、缩放等变得很棘手。虽然您可以完成这项工作在调整边距/偏移量/等方面付出足够的努力，最好尝试不同的方法。

据我所知，这两个“箭头”图是分开的，逻辑上每个都属于它的文本框。

因此，您应该考虑构建 HTML 以反映您所显示内容的逻辑构成，例如：

<div class="container">
   <!-- left-side division -->
   <div class="task task1">
       <div class="text-center">Task1</div>
       <div><svg>right-pointing-arrow-here</svg></div>
   </div>

   <!-- center division -->
   <div class="in-the-middle">
       <div class="text-center">midtext</div>
        <div><svg>(if-you-need-any-graphics-in-the-center)</svg></div>
   </div>

   <!-- right-side division -->
   <div class="task task2">
       <div><svg>left-pointing-arrow-here</svg></div>
       <div class="text-center">Task2</div>
   </div>
<div>

请注意，我在这里只包含了内容结构，我将把样式留给您（您需要使用display:和/或float:和position:属性适当地设置所有内部 s 的样式，以将它们彼此按正确的顺序放置。

推荐阅读