height not applying to li item

Question

I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?

html

<div id="navcontainer">
    <ul class="liheight">
        <li class="liheight"><a href="#">Team Management</a></li>
        <li class="liheight"><a href="#">User Management</a></li>

    </ul>
</div>

CSS

#navcontainer ul {
    display: block;
    list-style-type: disc;
     padding-top:40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

#navcontainer ul li { 


    display: inline;
    border:5px solid #009ddc;
    border-left: 5px solid #009ddc;
    border-right: 5px solid #009ddc;
    border-bottom:5px solid #009ddc;
    border-top:5px solid #009ddc;
    z-index: 0 !important;
    padding: 0;

}

    #navcontainer ul li a {
        text-decoration: none;
        padding: .1em 1em;
        background: #fff;
        color: #24387f !important;
    }

#navcontainer ul li a:hover
{
color: #fff !important;
background-color:  #009ddc;
}

.liheight {
   min-height: 50px;
}

Desired height

Current implementation

Applying the solution

Use display inline-block for li and block for a tags then add padding to a tags — Robert, Mar 05 '17 at 21:38

Jack · Answer 1 · 2017-03-07T09:31:55.810

Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.

Additionally:

I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.

Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/

EDIT:

To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.

Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.

And these are the changes I made:

#navcontainer ul li a {
    text-decoration: none;
    padding: .1em 1em;
    background: #fff;
    color: #24387f !important;
}

#navcontainer ul li a:hover {
    color: #fff !important;
    background-color:  #009ddc;
}

Becomes

#navcontainer ul li {
    background: #fff;
    color: #24387f !important;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .1em 1em;
    color: #24387f !important;
}

#navcontainer ul li:hover {
    color: #fff !important;
    background-color:  #009ddc;
}

Further comments:

I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:

<li class="liheight">
    <a href="#">User Management</a>
</li>

Would become this:

<a href="#">
    <li class="liheight">
        User Management
    </li>
</a>

This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!

EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/

Thanks. I tried your example and the height does increase but the background colour doesnt fill up the space and also the text needs to center aligned as shown in the above image. Currently it is showing me as in you fiddle example — Tom, Mar 05 '17 at 21:11
When I put the li in the a tag I get a message that you cannot nest a in the ul. Whats your comment on this — Tom, Mar 05 '17 at 21:44
Yes you can remove it as it is not used anymore in the code's current state. And what is giving you this message? It works fine and is perfectly valid as far as I'm aware: https://jsfiddle.net/g9aspo90/2/ (other than messing the styles up a little) — Jack, Mar 05 '17 at 21:50
i have tried applying your solution but when i hover i can see white background extending the box. Not sure why — Tom, Mar 05 '17 at 22:30

score 0 · Answer 2 · answered Mar 06 '17 at 09:40

0

First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.

answered Mar 06 '17 at 09:40

b.doe

134
6

score 0 · Answer 3 · edited May 23 '17 at 12:17

I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item

This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.

Another way to make the li elements is to use floats: float: left

But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.

Here are two possible solutions to your problem, you can choose the best one that fits your needs.

Solution one:

#navcontainer ul {
    list-style-type: disc;
     padding-top:40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

#navcontainer ul li { 
    display: inline-block;
    border:5px solid #009ddc;
    border-left: 5px solid #009ddc;
    border-right: 5px solid #009ddc;
    border-bottom:5px solid #009ddc;
    border-top:5px solid #009ddc;
    z-index: 0 !important;
}

    #navcontainer ul li a {
     display: block;
        text-decoration: none;
        padding: 0.5em 4em;
        background: #fff;
        color: #24387f !important;
    }

#navcontainer ul li a:hover
{
color: #fff !important;
background-color:  #009ddc;
}

<div id="navcontainer">
    <ul>
        <li><a href="#">Team Management</a></li>
        <li><a href="#">User Management</a></li>
    </ul>
</div>

Solution two (using floats):

#navcontainer ul {
    list-style-type: none;
     padding-top:40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

#navcontainer ul li { 
    float: left;
    border:5px solid #009ddc;
    border-left: 5px solid #009ddc;
    border-right: 5px solid #009ddc;
    border-bottom:5px solid #009ddc;
    border-top:5px solid #009ddc;
    z-index: 0 !important;
}

    #navcontainer ul li a {
     display: block;
        text-decoration: none;
        padding: 0.5em 4em;
        background: #fff;
        color: #24387f !important;
    }

#navcontainer ul li a:hover
{
color: #fff !important;
background-color:  #009ddc;
}

<div id="navcontainer">
    <ul>
        <li><a href="#">Team Management</a></li>
        <li><a href="#">User Management</a></li>
    </ul>
</div>

For further reading check out these articles:

CSS display: inline vs inline-block

https://developer.mozilla.org/en-US/docs/Web/CSS/display

https://alistapart.com/article/css-floats-101

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Ramesh Kumar · Answer 4 · 2017-03-05T22:13:53.350

-1

You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
        display: inline;
        border: 5px solid #009ddc;
        border-left: 50px solid #009ddc;
        border-right: 50px solid #009ddc;
        border-bottom: 50px solid #009ddc;
        border-top: 50px solid #009ddc;
        z-index: 0 !important;
        padding: 0;
    }

My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.

edited Mar 05 '17 at 22:13

answered Mar 05 '17 at 21:14

Ramesh Kumar

1,508
15
16

How do I achieve the same using bootstrap. Do you have an example – Tom Mar 05 '17 at 22:49
@Tom You can refer these links, hopefully these examples will help you. 1. https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp 2. https://www.w3schools.com/bootstrap/bootstrap_navbar.asp – Ramesh Kumar Mar 05 '17 at 23:32

height not applying to li item

4 Answers4