Question

大家好日子，

我已经调试了好几个小时了。当我希望它显示为水平时，它会正常显示。

我缺少什么？

下面是html，css，bootstrap和jquery代码。

由于

段：

＆＃13;

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

＆＃13;

#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;
	}

＆＃13;

<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>

＆＃13;

Answer 1

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

.signUpStep {
    width: 100%
}

Bootply：http://www.bootply.com/1qMqaa5TTE

Answer 2

您在代码中指定的宽度，即100％占用特定div的整个位置，这就是为什么每个div看起来都是一行而不是完整的div是单行。更具体地说

.signUpstep { 。。宽度：100％;
。。 }

使宽度等效大小以使其适合行。数学上100％/（行数）

Answer 3

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

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

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

如何水平对齐此菜单

3 个答案: