как я могу выровнять это меню по горизонтали


Добрый день всем,

Пожалуйста, я отлаживал это в течение нескольких часов. Он отображается верифицированно, в то время как я хочу, чтобы он отображался горизонтально.

Что я упускаю?

Ниже приведены коды 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>
3 3

3 ответа:

Удалить class="row" в вашем содержащем div и в вашем css удалите следующее:

.signUpStep {
    width: 100%
}

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

Ширина, указанная в коде ie 100%, занимает все место для этого конкретного div, поэтому каждый div кажется строкой, а не полным div, являющимся одной строкой.! Более конкретно

.signUpstep { . . ширина: 100%;
. . }

Сделайте ширину эквивалентной размеру, чтобы поместить его в строку.Математически 100%/(число строк)

Добавьте этот CSS для изменения атрибутов элементов меню:

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

Https://jsfiddle.net/wrunnvqa/1/