1
Я пытаюсь равномерно распределить навигационную панель, чтобы она распространялась по всей странице, а не оставляла пробел к правой стороне, как это делается в настоящее время.CSS - Равномерно распределенная панель навигации
Как бы я смог добиться этого с помощью CSS?
HTML
<nav class="navbar navbar-default" role="navigation">
<!--– Brand and toggle get grouped for better mobile display –-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--– Collect the nav links, forms, and other content for toggling –-->
<div class="collapse navbar-collapse in navbar-ex1-collapse">
<ul id="menu-main-menu" class="nav navbar-nav divider"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-20 active"><a title="Find Your Home" href="http://localhost/radleigh/find-your-home/">Find Your Home</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a title="About Us" href="http://localhost/radleigh/about-us/">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="Helping You Move" href="http://localhost/radleigh/helping-you-move/">Helping You Move</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a title="News" href="http://localhost/radleigh/news/">News</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a title="Get in Touch" href="http://localhost/radleigh/get-in-touch/">Get in Touch</a></li>
</ul> </div><!--– /.navbar-collapse –-->
</div><!--– /.container –-->
</div>
</nav>
CSS
/* Navigation
-------------------------*/
.navbar-default {
background-color: #002e5d;
border-radius: 0;
font-size: 18px;
}
#toggle-navbar {
display: none;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100px;
line-height: 95px;
font-size: 2em;
font-weight: 900;
color: #fff;
text-align: center;
background: #ffcd00;
}
#toggle-navbar:hover {
cursor: pointer;
}
.navbar {
border-radius: 0;
border: none;
margin-bottom: 0;
}
.navbar-default .navbar-nav li {
padding: 0 32px;
height: 40px;
margin: 10px 0;
}
.navbar-default .navbar-nav li:not(:last-child) {
border-right: solid 1px #FFF;
}
.navbar-default .navbar-nav li a {
color: #FFF;
padding: 10px;
}
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
color: #e8e8e8;
}
.navbar-collapse {
display: table;
float: right;
height: auto !important;
max-height: none;
overflow: hidden;
padding: 0;
position: relative;
}
.navbar-collapse.in {
overflow: hidden;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
.navbar-default .navbar-toggle {
border-color: #FFF;
}
.navbar-default .navbar-toggle .icon-bar:hover {
background-color: #FFF;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #1b66b2;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
background-color: #1b66b2;
color: #FFF;
}
.navbar .current_page_item {
background: #1b66b2;
border-right: none !important;
height: 60px !important;
margin: 0 !important;
font-weight: 700;
}
.navbar .current_page_item:not(:first-child) {
margin: 0 -1px !important;
}
.navbar .current_page_item a {
line-height: 40px !important;
}
.menu-main-menu {
font-size: 17px;
}
Я сделал jsfiddle: https://jsfiddle.net/xfj7ummm/
Вы выглядите так. ** https: //jsfiddle.net/m6984whw/12/** –