1. дома
  2. Вопрос и ответ
  3. Позиционирование на navbar

Позиционирование на navbar

2014-10-15 3 views
1

Я создал навигационную панель с некоторыми ссылками на нее и заголовок, точно так же, как бутстрап, но я пытаюсь сделать так, чтобы выпадающее меню было справа, но когда я добавляю класс «pullRight» «он перемещает его вправо, но не остается на панели навигации.Позиционирование на navbar

Screenshot

pullright CSS

.pullRight { 
    float: right; 
}

HTML

<ul> 
    <li><a href="#"><i class="fa fa-comments"></i> Forums</a></li> 
    <li><a href="#"><i class="fa fa-trophy"></i> Players</a></li> 
    <li><a href="#"><i class="fa fa-shopping-cart"></i> Shop</a></li> 
    <li class="pullRight"><a href="#"><i class="fa fa-user"></i> Account</a></li> 
</ul>

Панель навигации CSS

.navigationBar { 
    width: 100%; 
    height: 40px; 
    background: #efefef; 
    background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3)); 
    background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0); 
    border-bottom: 2px solid #EB7727; 
} 
.navigationBar ul { 
    list-style: none; 
} 
.navigationBar ul li { 
    width: 100px; 
    height: 40px; 
    background: #efefef; 
    background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3)); 
    background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
    background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0); 
    border-bottom: 2px solid #EB7727; 
    text-align: center; 
    border-right: 1px solid gray; 
    display: table-cell; 
    cursor: pointer; 
} 
.navigationBar ul li:first-child { 
    border-left: 1px solid gray; 
} 
.navigationBar ul li:hover { 
    border-right: 1px solid gray; 
    display: table-cell; 
    width: 100px; 
    height: 40px; 
    background: rgb(211,211,211); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(239,239,239,1) 50%, rgba(211,211,211,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d3d3d3',GradientType=0); /* IE6-9 */ 
    text-align: center; 
    cursor: pointer; 
} 
.navigationBar ul li a , 
.navigationBar ul li a:hover , 
.navigationBar ul li a:active { 
    line-height: 40px; 
    color: #000; 
    text-decoration: none; 
    font-size: 14px; 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
    cursor: pointer; 
}

источник

2014-10-15 Joel Evans

ответ

1

надеюсь, что это помогает. все, что я сделал добавляется поплавок слева все другие опции меню, кроме счетов ... я также добавил отступы 0 до уль элемента, чтобы удалить ведущее место до форумов ..

 
 
    .navigationBar { 
 
    width: 100%; 
 
    height: 40px; 
 
    background: #efefef; 
 
    background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3)); 
 
    background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0); 
 
    border-bottom: 2px solid #EB7727; 
 
} 
 
.navigationBar ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.navigationBar ul li { 
 
    width: 100px; 
 
    height: 40px; 
 
    background: #efefef; 
 
    background: -moz-linear-gradient(top, #efefef 50%, #d3d3d3 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#efefef), color-stop(100%,#d3d3d3)); 
 
    background: -webkit-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: -o-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: -ms-linear-gradient(top, #efefef 50%,#d3d3d3 100%); 
 
    background: linear-gradient(to bottom, #efefef 50%,#d3d3d3 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#d3d3d3',GradientType=0); 
 
    border-bottom: 2px solid #EB7727; 
 
    text-align: center; 
 
    border-right: 1px solid gray; 
 
    display: table-cell; 
 
    cursor: pointer; 
 
} 
 
.navigationBar ul li:first-child { 
 
    border-left: 1px solid gray; 
 
} 
 

 
.navigationBar ul li:last-child { 
 
    border-left: 1px solid gray; 
 
} 
 
.navigationBar ul li:hover { 
 
    border-right: 1px solid gray; 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 40px; 
 
    background: rgb(211,211,211); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(239,239,239,1) 50%, rgba(211,211,211,1) 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(211,211,211,1) 0%,rgba(239,239,239,1) 50%,rgba(211,211,211,1) 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d3d3d3',GradientType=0); /* IE6-9 */ 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.navigationBar ul li a , 
 
.navigationBar ul li a:hover , 
 
.navigationBar ul li a:active { 
 
    line-height: 40px; 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
 
    cursor: pointer; 
 
} 
 
.pullRight{ 
 
    float:right; 
 
} 
 
.pullLeft{ 
 
    float:left; 
 
}
<div class="navigationBar"> 
 
<ul> 
 
    <li class="pullLeft"><a href="#"><i class="fa fa-comments"></i> Forums</a></li> 
 
    <li class="pullLeft"><a href="#"><i class="fa fa-trophy"></i> Players</a></li> 
 
    <li class="pullLeft"><a href="#"><i class="fa fa-shopping-cart"></i> Shop</a></li> 
 
    <li class="pullRight"><a href="#"><i class="fa fa-user"></i> Account</a></li> 
 
</ul> 
 
</div>

Надеюсь, это то, что вы хотели сделать ... есть день gr8

источник

2014-10-15 22:33:50 Sai

+0

+1 - Я бы упростил это немного - '.navigationBar ul li {float: left; } .navigationBar ul li: last-child {float: right; } 'float их всех влево, кроме последнего, который будет плавать вправо. Нет необходимости в занятиях в вашем HTML :) – misterManSam

+0

@misterManSam Я согласен с вами. Я не думал об этом. Я знал, в чем проблема, как только я увидел скриншот, который опубликовал OP. Так что я просто сделал самую минимальную работу lol благодаря этому улову – Sai

0 
pullRight

Должно быть

.pullRight

В файле CSS

источник

2014-10-15 22:05:44

+0

Я уже сделал это, я случайно не понял его здесь. –

+0

Что-нибудь еще, что я мог сделать? –

 Смежные вопросы

  • Нет связанных вопросов^_^