CODEWITHSUNDEEP
htmlcss
Lee Lee
Lee Lee

Reputation: 583

Set width of ul and li to 100% to fit in the screen in css

I have my html page with tab bar inside. Now I want the tab bar fits to my screen I try to set width: 100% but there is nothing changed. How can I make my tab bar fits to my monitor screen. Any help thanks. 

#tabmenu {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}

/*Create a horizontal list with spacing*/
.tab {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
.tab a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
.tab:hover a {
    background: #19c589;
}

/*Style for dropdown links*/
.tab:hover #tabmenu a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

/*Hover state for dropdown links*/
.tab:hover #tabmenu a:hover {
    background: #19c589;
    color: #fff;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Only Navigation Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <ul id="tabmenu">
        <li class = "tab"><a href="#">Home</a></li>
        <li class = "tab"><a href="#">News</a></li>
        <li class = "tab"><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Upvotes: 0

Views: 4024

Answers (4)

priya786
priya786

Reputation: 1834

may it help you 

body{
overflow:hidden;} 
#tabmenu {
        list-style-type:none;
        margin:0;
        padding:0;
   width:100%;
        position: absolute;
   overflow:hidden;
    }

    /*Create a horizontal list with spacing*/
    .tab {
        display:inline-block;
        float: left;
        margin-right: 1px;
      width:33%;
    }

    /*Style for menu links*/
    .tab a {
        display:block;
        min-width:140px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #fff;
        background: #2f3036;
        text-decoration: none;
    }

    /*Hover state for top level links*/
    .tab:hover a {
        background: #19c589;
    }

    /*Style for dropdown links*/
    .tab:hover #tabmenu a {
        background: #f3f3f3;
        color: #2f3036;
        height: 40px;
        line-height: 40px;
        width: 100%;
    }

    /*Hover state for dropdown links*/
    .tab:hover #tabmenu a:hover {
        background: #19c589;
        color: #fff;
    }
<ul id="tabmenu">
        <li class = "tab"><a href="#">Home</a></li>
        <li class = "tab"><a href="#">News</a></li>
        <li class = "tab"><a href="#">Contact</a></li>
    </ul>

<!-- end snippet -->

Upvotes: 2

Pratik Gadoya
Pratik Gadoya

Reputation: 1513

Set following code to your code :

#tabmenu {
    width: 100%
}

.tab {
    width:33.33%
}

Upvotes: 2

Gibbs
Gibbs

Reputation: 22956

    .tabmenu
    {
      width:100%;
    }

    .tabmenu li
    { 
      width:33%; 
    }

    li a
    {
      width:100%
    }

You have to set 100% width for your ul menu. Since you have 3 tabs, 100%/3, set 33% for your list items. You have only one anchor tag so it will take the entire width of list item.

Upvotes: 1

Ram kumar
Ram kumar

Reputation: 3162

Update code 

#tabmenu {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    display: table;
    width: 100%;
    table-layout: fixed;
}

/*Create a horizontal list with spacing*/
.tab {
    display: table-cell;
    margin-right: 1px;
}

/*Style for menu links*/
.tab a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
.tab:hover a {
    background: #19c589;
}

/*Style for dropdown links*/
.tab:hover #tabmenu a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

/*Hover state for dropdown links*/
.tab:hover #tabmenu a:hover {
    background: #19c589;
    color: #fff;
}
<ul id="tabmenu">
        <li class = "tab"><a href="#">Home</a></li>
        <li class = "tab"><a href="#">News</a></li>
        <li class = "tab"><a href="#">Contact</a></li>
    </ul>

Upvotes: 3

Related Questions