как я могу выровнять это меню по горизонтали
Добрый день всем,
Пожалуйста, я отлаживал это в течение нескольких часов. Он отображается верифицированно, в то время как я хочу, чтобы он отображался горизонтально.
Что я упускаю?
Ниже приведены коды 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 ответа:
Удалить
class="row"
в вашем содержащем div и в вашем css удалите следующее:.signUpStep { width: 100% }
Bootply: http://www.bootply.com/1qMqaa5TTE
Ширина, указанная в коде ie 100%, занимает все место для этого конкретного div, поэтому каждый div кажется строкой, а не полным div, являющимся одной строкой.! Более конкретно
.signUpstep { . . ширина: 100%;
. . }Сделайте ширину эквивалентной размеру, чтобы поместить его в строку.Математически 100%/(число строк)