如何将垂直显示转换为水平显示

Question

目前我正在开发一个注册表...我希望一步一步地为用户提供...底部的代码我从其他网站获得并且我已经修改了一些css ...但是元素显示在垂直...我需要的是横向......我试图定位，但它不起作用......

目前显示

我需要什么

在HTML中

<div class="steps">
     <div  id='genger' name='genger'/><label >Step 1</label></div>                    
     <div  id='genger' name='genger'/><label>Step 2</label></div>                  
     <div  id='genger' name='genger'/><label >Step 3</label></div>                 
     <div  id='genger' name='genger'/><label>Step 4</label></div>                
     <div  id='genger' name='genger'/><label >Step 5</label></div>
</div>

在CSS中

    .steps{

      width: 200px;
      display:inline-block;
      position: relative;
      padding: 1em 2em 1em 3em;

      vertical-align: top;

    }

    label{
      background: #393D40;
      height: 69px;
      line-height: 69px;
      width: 100%;
      display: block;
      border-bottom: 1px solid #44494e;
      color: #889199;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 11px;
      letter-spacing: 1px;
      text-indent: 52px;
      cursor: pointer;
      transition: all 0.3s ease
    }

    label:before{
      content:"";
      width: 12px;
      height: 12px;
      border: 2px solid #25292e;
      display: block;
      position: absolute;
      margin: 26px 0px 0px 18px;
      border-radius: 100%;
      transition: border 0.7s ease
    }

    label[for=genger]{
      border-radius: 3px 3px 0px 0px;
    }

    label:hover{
      background: #2B2E30;
      color: #46b7e5
    }

    label:hover:before{
      border: 2px solid #46b7e5;
    }

Click for JSFiddle

Answer 1

Fiddle

上的演示

HTML：

<div class="steps">
    <div class='genger'>
        <label>Step 1</label>
    </div>
    <div class='genger'>
        <label>Step 2</label>
    </div>
    <div class='genger'>
        <label>Step 3</label>
    </div>
    <div class='genger'>
        <label>Step 4</label>
    </div>
    <div class='genger'>
        <label>Step 5</label>
    </div>
</div>

CSS：

.genger {
    display: inline-block;
    vertical-align: top;
    margin: -1px;
}
.steps {
    width: 100%;
    display:inline-block;
    position: relative;
    vertical-align: top;
}
label {
    background: #393D40;
    height: 69px;
    line-height: 69px;
    width: 150px;
    display: block;
    border-bottom: 1px solid #44494e;
    color: #889199;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1px;
    text-indent: 52px;
    cursor: pointer;
    transition: all 0.3s ease
}
label:before {
    content:"";
    width: 12px;
    height: 12px;
    border: 2px solid #25292e;
    display: block;
    position: absolute;
    margin: 26px 0px 0px 18px;
    border-radius: 100%;
    transition: border 0.7s ease
}
label:hover {
    background: #2B2E30;
    color: #46b7e5
}
label:hover:before {
    border: 2px solid #46b7e5;
}

Answer 2

DEMO

检查演示，我已经添加了css

.steps {
width: 100%;
margin: 20px;
vertical-align: top;

}
.genger {float: left;width: 150px; }

Answer 3

首先，我已经取出你的.steps宽度，只是删除了填充

您还提供了genger div代码

<div  id='genger' name='genger'/><label >Step 1</label></div>

你已经在标签开始之前关闭了div，我将其更改为，

<div  class='genger' name='genger'><label >Step 1</label></div>

还将您的id genger命名为class

因此这是最终的代码......

#wrapper{
           width:1200px;
           margin:0 auto
      }

.steps{
		  display:inline-block;
		  position: relative;
		  /*padding: 1em 2em;*/
		  vertical-align: top;
          background:red;
          width:100%;
		}
         .genger{
             width:20%;
             min-width:150px;
             float:left;
          }
		label{
		  background: #393D40;
		  height: 69px;
		  line-height: 69px;
		  width: 100%;
		  display: block;
		  border-bottom: 1px solid #44494e;
		  color: #889199;
		  text-transform: uppercase;
		  font-weight: 900;
		  font-size: 11px;
		  letter-spacing: 1px;
		  text-indent: 52px;
		  cursor: pointer;
		  transition: all 0.3s ease
		}

		label:before{
		  content:"";
		  width: 12px;
		  height: 12px;
		  border: 2px solid #25292e;
		  display: block;
		  position: absolute;
		  margin: 26px 0px 0px 18px;
		  border-radius: 100%;
		  transition: border 0.7s ease
		}

		label[for=genger]{
		  border-radius: 3px 3px 0px 0px;
		}

		label:hover{
		  background: #2B2E30;
		  color: #46b7e5
		}

		label:hover:before{
		  border: 2px solid #46b7e5;
		}

<div id="wrapper">    
    <div class="steps">
	     <div  class='genger' name='genger'><label >Step 1</label></div>                    
	     <div  class='genger' name='genger'><label>Step 2</label></div>                  
	     <div  class='genger' name='genger'><label >Step 3</label></div>                 
	     <div  class='genger' name='genger'><label>Step 4</label></div>                
	     <div  class='genger' name='genger'><label >Step 5</label></div>
    </div>
<div>

希望这有帮助。

P.S：您也可以将此菜单置于中心位置。只需将它包装在一个更大的div中并给出margin：0 auto

编辑:: 如果您希望宽度更灵活，可以在步骤类中添加宽度：100％，在genger类中添加宽度20％。 立即查看更新的代码段