How to resize navigation width based on text? - html

Question

So i have navigation that is width: 78.8%; and i need to put text inside like this on fiddle: https://jsfiddle.net/cj8c7mhr/
But how can i set with automatic so that i can put longer words.
<div class="nav-wrapp">
<div class="nav-box">
<nav class="navbar navbar-default pull-left">
<ul class="nav navbar-nav ">
<li>O Revicon</li>
<li>Konzalting</li>
<li>Seminar i savjetovanja</li>
<li>Časopisi</li>
<li>Izdavaštvo</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
</div>
I want that they be next each other...

Answer 1

CSS Tables would seem to be the answer here:
ul.nav.navbar-nav {
width: 100%;
display: table;
}
ul.nav.navbar-nav li {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.nav-wrapp {
float: left;
border-top: 3px solid #C20C0C;
border-bottom: 1px solid #ccc;
width: 78.8%;
}
.nav-box {
float: left;
width: 100%;
}
.nav-wrapp .navbar-default {
background-color: #fff;
border: 0px;
margin-bottom: 0px;
height: 100%;
font-family: 'PT_Sans_Caption_Bold';
font-size: 16px;
width: 100%;
}
ul.nav.navbar-nav {
width: 100%;
display: table;
}
ul.nav.navbar-nav li {
display: table-cell;
text-align: center;
vertical-align:middle;
}
.nav-wrapp .nav.navbar-nav>li {
border-right: 1px solid #ccc;
min-height: 55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-wrapp">
<div class="nav-box">
<nav class="navbar navbar-default pull-left">
<ul class="nav navbar-nav ">
<li>O Revicon
</li>
<li>Konzalting
</li>
<li>Seminar i savjetovanja
</li>
<li>Časopisi
</li>
<li>Izdavaštvo
</li>
<li>Kontakt
</li>
</ul>
</nav>
</div>
</div>