Question

我的html页面里面有标签栏。现在我希望标签栏适合我的屏幕我尝试设置宽度：100％但没有任何改变。如何使我的标签栏适合我的显示器屏幕。任何帮助谢谢。

#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>

Answer 1

更新代码

#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>

Answer 2

将以下代码设置为您的代码：

#tabmenu {
    width: 100%
}

.tab {
    width:33.33%
}

Answer 3

可能对你有所帮助

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

<!-- end snippet -->

Answer 4

    .tabmenu
    {
      width:100%;
    }

    .tabmenu li
    { 
      width:33%; 
    }

    li a
    {
      width:100%
    }

您必须为ul菜单设置100％宽度。由于您有3个标签，100％/ 3，因此您的列表项目设置为33％。您只有一个锚标记，因此它将占据列表项的整个宽度。

将ul和li的宽度设置为100％以适合css中的屏幕

4 个答案: