How to create a horizontal list without "display:inline;" or "float:left;"? (Or any other fix that may work for this)

Question

I'm trying to get the list of links to stay in the bordered box. Using display:inline; results in the link boxes looking strange. Here's how it looks now

https://jsfiddle.net/9jtxjb1s/4/

The code: Html

<body>
    <div class="gridContainer clearfix">
    <div id="LayoutDiv1">
    <div id="container">
        <header>
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
        </header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>  
                <li><a href="link1.html">Link 1</a>
                    <ul>
                        <li><a href="gallery1.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link2.html">Link 2</a>
                    <ul>
                        <li><a href="gallery2.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link3.html">Link 3</a>
                    <ul>
                        <li><a href="gallery3.html">Gallery</a></li>
                    </ul>
                </li>
                <li><a href="link4.html">Link 4</a></li>
            </ul>
        </nav>

        <section>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

        </section>
        <footer>
            <p>&copy; Test</p>
        </footer>
    </div>
    </div>
    </div> 
</body>

The main, relavent styling css (full copy of css on fiddle)

#container{
    background:#228b22;
    float:left;
    border:1px solid #000000;
    width:100%;
}

body {
    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size:90%;
    margin:20px auto;
    text-align:center;
    line-height:1.4em;
/*  width:98%; */
    background:white;
}

header, section, article, footer,  nav{
    padding:10px 20px 20px;
    margin:10px;
    /* float:left; */
    width:auto;
    border:1px solid #000000;
}

header {
    display:block;
    position:relative;
    text-align:left;
}

nav {
    /* float:left; */
    text-align:center;
    display:block;
}

nav ul{
    margin-left:15%;
    padding:0;
    list-style:none;
    text-align:center;
}

nav ul li{

    float:left;
    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#4ea24e;
    border:1px solid #000000;

}

nav ul li a{
    text-decoration:none;
    color:black;
}

nav ul li li{
    background:#4ea24e;
    color:#fff;
    display:none;
    float:left;
    margin-left:-17.9%;
}

nav ul li li:hover{
    background:#7ab97a;
}

nav ul li li a{
    text-decoration:#8A5C2E;
    color:#black;
}

ul{
    text-align:left;
    margin-left:40%;
    padding:0;
}

Thanks

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Floats can result in elements outside their containers; sometimes you need to add extra properties to avoid that behavior (e.g. floating stuff within a div, floats outside of div. Why?). Regarding your code, you only need to remove the float and make the elements display as inline-block.

That is:

nav ul li{
    display: inline-block;

    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#4ea24e;
    border:1px solid #000000;
}

Working demo: http://codepen.io/anon/pen/avogWb

PS: Sorry I posted a codepen, I'm having issues entering the JSFiddle site.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 30 '15 at 01:04

Miguel Jiménez

1,276
1
16
24

I don't mind the codepen, I'm grateful for the help :) But like the other solutions, this results in little gaps between each box... I'm trying to keep then together – Dan Aug 30 '15 at 01:32
Ok, I understand. I'm glad you found the solution :) – Miguel Jiménez Aug 30 '15 at 01:54

score 0 · Answer 2 · answered Aug 30 '15 at 01:06

0

Add this style to your stylesheet:

    #container > nav > ul {
        display: flex;
        -webkit-display: flex;

        flex-direction: row;
        -webkit-flex-direction: row;

        justify-content: center;
        -webkit-justify-content: center;
    }

Updated Fiddle

answered Aug 30 '15 at 01:06

SuperVeetz

2,128
3
24
37

I like this solution but when I resize the window, text no longer fits in the box – Dan Aug 30 '15 at 01:28

score 0 · Answer 3 · answered Aug 30 '15 at 01:09

0

add this to your css to fix the float problem

ul:after{
    content: "";
  display: table;
  clear: both;
}

answered Aug 30 '15 at 01:09

W.Younis

37
3

It's almost right but this way, there are gaps between each box/list item – Dan Aug 30 '15 at 01:29

Sharad Saxena · Answer 4 · 2015-08-30T01:34:54.130

0

Instead of using float:left, you can make a horizontal list of links using the below css.

nav ul{
    margin: 0;
    font-size:0;
}
nav ul li{
    font-size: 14px;
    display:inline-block;
}

JSFiddle: https://jsfiddle.net/9jtxjb1s/6/

edited Aug 30 '15 at 01:34

answered Aug 30 '15 at 01:10

Sharad Saxena

319
4
16

I took a look and this almost achieves the effect I want, only thing is that there is a small gap between each box – Dan Aug 30 '15 at 01:27
Yes, the gap is due to the font-size of parent `
– Sharad Saxena Aug 30 '15 at 01:35

How to create a horizontal list without "display:inline;" or "float:left;"? (Or any other fix that may work for this)

4 Answers4