Question

以下代码及其输出也可用于：https://jsfiddle.net/rupali317/rj4ashxq/

目标：在以下代码中，我尝试创建工作流栏，显示步骤1，步骤2等。

预期结果：这些步骤以绿色圆形按钮突出显示，圆形绿色按钮之间应该有蓝色箭头。

实际结果如我的小提琴所示，箭头线首先出现，然后是三个圆形按钮，最后是两个箭头。

问题：我已经明确指定了html元素的顺序（这应该给我预期的结果）。问题是，为什么排序的方式不同？

＆＃13;

<html>

<head>
  <style type="text/css">
    .green-button {
      color: white;
      background-color: #27AE60;
      border-radius: 50%;
      height: 50px;
      width: 50px;
      border-style: solid;
      border-width: 0px;
      cursor: auto;
    }
    
    .arrow {
      width: 120px;
    }
    
    .line {
      margin-top: 25px;
      width: 110px;
      background: blue;
      height: 1px;
      float: left;
    }
    
    .head {
      margin-top: 15px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid blue;
      float: right;
    }
  </style>
</head>

<body>
  <div>
    <button class="green-button">1</button>
    <span class="arrow">
    				<span class="line"></span>
    <span class="head"></span>
    </span>
    <button class="green-button">2</button>
    <span class="arrow">
    				<span class="line"></span>
    <span class="head"></span>
    </span>
    <button class="green-button">3</button>
  </div>
</body>

</html>

＆＃13;

Answer 1

css中的浮动线将强制该线显示在圆圈的左侧。

试试这个：

.green-button {
          color: white;
          background-color: #27AE60;
          border-radius: 50%;
          height: 50px;
          width: 50px;
          border-style: solid;
          border-width: 0px;
          cursor: auto;
        }

        .arrow {
          width:120px;
        }

        .line {
          margin-top:25px;
          width:100px;
          padding:0 50px;
          height:1px;
          border-style:solid;
          border-width:1px;
          border-color:blue;
          background:blue;
        }

        .head {  
          margin-top:15px;
          border-top: 10px solid transparent; 
          border-bottom: 10px solid transparent;
          border-left: 10px solid blue;
        }

Answer 2

将.arrow显示内联块。这将按预期结果显示

命令您的箭头

.arrow {
  width:120px;
  display: inline-block;
}

希望这会有所帮助：）

.green-button {
  color: white;
  background-color: #27AE60;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border-style: solid;
  border-width: 0px;
  cursor: auto;
}

.arrow {
  width:120px;
  display: inline-block;
}

.line {
  margin-top:25px;
  width:110px;
  background:blue;
  height:1px;
  float:left;
}

.head {  
  margin-top:15px;
  border-top: 10px solid transparent; 
  border-bottom: 10px solid transparent;
  border-left: 10px solid blue;
  float:right;
}

<html>
	<head>
	</head>
	<body>
		<div>
			<button class="green-button">1</button>
			<span class="arrow">
				<span class="line"></span>
        <span class="head"></span>
			</span>
			<button class="green-button">2</button>
			<span class="arrow">
				<span class="line"></span>
				<span class="head"></span>
			</span>
			<button class="green-button">3</button>
		</div>
	</body>
</html>

为什么html元素以意想不到的顺序呈现？

2 个答案: