Question

我正在尝试使用页面将我的导航菜单li项目宽度设置为自动调整大小。这意味着，如果有4个li标签，则4个标签应将它们自身划分为屏幕宽度，并且相等。我尝试使用auto和100％，但没有任何工作：（

<div class="headercss">

    <div class="headerlogo">

    </div>

    <div class="nav">

        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>

    </div>



</div>

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 500px;
    background-color: #000000;
    border: 1px dashed #ffffff;
    position: relative;
}

.headerlogo {
    width: 980px;
    height: 250px;
    background-color: #272727;
    border: 1px dashed #ffffff;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

.nav {
    width: 980px;
    height: 70px;
    background-color: #272727;
    border: 1px dashed #ffffff;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    height: 68px;
    width: 244px;
    font-size: 12px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 2pt;
    line-height: 200%;
}

a:hover, a:active {
    background-color: #242424;
}

Answer 1

将此CSS添加到您的ul代码：

display:table;
table-layout: fixed;

这是你的li CSS：

display: table-cell;

应该工作：）

Answer 2

根据列表中的项目数量，以％为单位。

ul{ list-style-type: none;
        margin: 0;
        padding: 0;
        float:left;
        width:100%;
        overflow: hidden;
    }

li {
    float: left;
    width:25%;
}

Answer 3

您也可以使用display：flex

.nav ul {
  display: flex;
}
.nav li {
  flex: 1;
}

nav li标签的自动宽度

3 个答案: