How to keep
elements on single line in fixed width?

Question

I am developing a website and I want a menu like the above image. This is what I have tried: jsFiddle

HTML

         <div class="">
            <ul class="header-menu-ul">
            <li class="header-menu menu-link1-color"><a href="" class="header-menu-link ">ABC's Office</a></li>
            <li class="header-menu menu-link2-color"><a href="" class="header-menu-link ">Benefits</a></li>
            <li class="header-menu menu-link3-color"><a href="" class="header-menu-link ">NEW Brand</a></li>
            <li class="header-menu menu-link4-color"><a href="" class="header-menu-link ">Editorial</a></li>
            <li class="header-menu menu-link5-color"><a href="" class="header-menu-link ">Manger</a></li>
            <li class="header-menu menu-link6-color"><a href="" class="header-menu-link ">Extra</a></li>
            </ul>

            </div>

The problem I'm facing is it's taking a space between <li> tags.

You should [remove the white space between inline-blocks](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532) like so: http://jsfiddle.net/hashem/x98eaj92/2/ — Hashem Qolami, Aug 20 '14 at 09:33
fixed - http://jsfiddle.net/x98eaj92/4/ the space was caused by inline-block. to fix this you need to set the font size to 0 of the div container then set the font size in `

Gofilord · Accepted Answer · 2014-08-20T09:39:53.890

5

I just floated the list items to the left, like this:

.header-menu-ul li {
  float: left;
}

WORKING FIDDLE: link.

edited Aug 20 '14 at 09:39

answered Aug 20 '14 at 09:34

Gofilord

6,239
4
27
43

If you can just hit the V mark below the vote count, it will help everyone reading this question. – Gofilord Aug 20 '14 at 09:36
I mean the accept answer button... check mark, however you want to call it. Clicking it means that this answer worked for you, and other people that read the question will know that this is the right solution. – Gofilord Aug 20 '14 at 09:42

score 0 · Answer 2 · answered Aug 20 '14 at 09:43

DEMO

This will create an always single line menu unliek the floating solution where often items fall from position on small sizes + no spaces between the items.

Code:

.header-menu-ul{
    display: table;
    width: 100%;
}
.header-menu{
    display: table-cell;
}

score 0 · Answer 3 · answered Aug 20 '14 at 09:54

0

my approach would be using inline-block and min-width. can also use percent in width (1oo% / total_li ).

answered Aug 20 '14 at 09:54

Wreeecks

2,186
1
33
53

How to keep elements on single line in fixed width?

3 Answers3

How to keep
elements on single line in fixed width?