与顺风对齐的步骤

Question

我想使用 tailwind 创建自定义步骤，但步骤名称是圆圈附近的。如何将它们放在下面？另外如何使台阶之间的距离更宽？他们太近了

<div class="flex justify-center">       
    <div  class="mt-4 grid grid-cols-2 gap-y-6 sm:grid-cols-2 sm:gap-x-4">     
        <nav aria-label="Progress" class="sm:col-span-2 stepper">
            <ol role="list" class="rounded-md divide-y divide-gray-300 md:flex md:divide-y-0 ">
                <li class="relative md:flex-1 md:flex " >    
                                            
                <div class="absolute inset-0  flex items-center" aria-hidden="true">
                    <div class="h-0.5 w-80 bg-green-500 ml-9"></div>
                </div>
                <a href="#"  class="relative w-8 h-8 flex items-center justify-center  rounded-full">
                    <!-- Heroicon name: solid/check -->
                    <span :class="step == '2' ? 'bg-green-500 rounded-full group-hover:bg-green-800' : 'border-2 border-green-500 rounded-full '" class="flex-shrink-0 w-10 h-10 flex items-center justify-center ">
                                    
                        <svg x-show="step == '2'" class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span x-show="step == '1'" class="text-green-500 group-hover:text-green-900">01</span>
                    </span>
                    
                </a>
                <p :class="step == '1' ? 'text-green-500': 'text-gray-500'" class="ml-4 text-sm font-medium text-gray-500">step 1</p>                      
                    
                </li>
                <li class="relative md:flex-1 md:flex" >                             
                <a href="#" class="relative w-8 h-8 flex items-center justify-center bg-white  rounded-full" aria-current="step">
                    <span :class="step == '2' ? 'border-green-500': 'border-gray-300'" class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400">
                        <span :class="step == '2' ? 'text-green-500 group-hover:text-green-900' : ''" class="text-gray-500 group-hover:text-gray-900">02</span>
                    </span>                                  
                </a>
                <p :class="step == '2' ? 'text-green-500': 'text-gray-500'" class="ml-4 text-sm font-medium text-gray-500">step 2</p>                         
                </li>                            
            </ol>
        </nav>
    </div>
</div>

Answer 1

不确定顺风CSS但下面是我创建的代码供您参考，请根据需要进行更改。

.main-steps {
  display: flex;
  margin: 5px 30px;
  padding: 0;
  text-align: center;
  list-style-type: none;
  counter-reset: list;
}

.main-steps li {
  margin-right: 5px;
  position: relative;
}

.main-steps li::before {
  counter-increment: list;
  content: counter(list);
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 100%;
  margin-bottom: 5px;
  border: 1px solid green;
  display: inline-block;
}

.main-steps li a {
  display: block;
  text-transform: capitalize;
  text-decoration: none;
  color: green;
}

<ul class="main-steps">
  <li><a href="javscript:void(0);">step one</a></li>
  <li><a href="javscript:void(0);">step two</a></li>
  <li><a href="javscript:void(0);">step threen</a></li>
  <li><a href="javscript:void(0);">step four</a></li>
</ul>

Answer 2

看看这个干净的顺风步进器。 https://play.tailwindcss.com/TyBk6nPJM4。也许有帮助。

与顺风对齐的步骤

steps alignment with tailwind

css

tailwind-css