我怎样才能水平对齐这个菜单答案

【问题标题】：how can i align this menu horizontally我怎样才能水平对齐这个菜单
【发布时间】：2017-03-13 04:17:17
【问题描述】：

大家好，

请我已经调试了好几个小时了。它是垂直显示的，而我希望它是水平显示的。

我错过了什么？

以下是 html、css、bootstrap 和 jquery 代码。

谢谢

片段：

$("span#general-signup").appendTo( ".done" );

#activeStep{
    background: #007ee5;
    color: #fff;
	}

    #completedStep{
	color: #888;
    }

    .signUpStep {
    position: relative;
    float: left;
    background-color: #fafafa;
    height: 42px;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: #007ee5;
	}

    .stepNumb {
    float: left;
    font-size: 34px;
    line-height: 1em;
    font-weight: 300;
	}

    .stepInfo {
    margin-left: 22px;
    line-height: 16px;
    font-size: 17px;
    padding-top: 5px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <span id="general-signup" class="pull-right"><i class="fa fa-check fa-2x " style="color: #99ff00;"  aria-hidden="true"></i></span>
    </div>

    <div class="row">
        
        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">1</div>
                <div class="stepInfo done">Basic Info </div>
        </div>  

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">2</div>
                <div class="stepInfo done">Education</div>
        </div>

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">3</div>
                <div class="stepInfo done">Experience</div>
        </div>  
   
        <div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">4</div>
                <div class="stepInfo">Schedule</div>
        </div>  

        <div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">5</div>
                <div class="stepInfo">Social</div>
        </div>  

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">6</div>
                <div class="stepInfo done">Referral</div>
        
        </div>
    </div>

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

在包含的 div 中删除 class="row" 并在您的 css 中删除以下内容：

.signUpStep {
    width: 100%
}

引导层：http://www.bootply.com/1qMqaa5TTE

【讨论】：

如何让每个包含的 div 都可以点击？
@Angular2Lover 不确定可点击意味着鼠标指针发生了变化，您可以通过 css div{ cursor: pointer;} 执行任何操作，但单击时不会发生任何事情，除非您将事件处理程序绑定到它

【解决方案2】：

您在代码中指定的宽度，即 100% 占据了该特定 div 的整个位置，这就是为什么每个 div 看起来都是一行而不是完整的 div 是单行的原因。！更具体的

.signUpstep { . . 宽度:100%;
. . }

使宽度等效大小以适应行。数学上 100%/（行数）

【讨论】：

【解决方案3】：

添加此 CSS 以更改菜单元素的属性：

.row > div {
    display: inline-block;
    float: none;
    width: inherit;
}

https://jsfiddle.net/wrunnvqa/1/

【讨论】：