nav li 标签的自动宽度

Question

我正在尝试制作我的导航我正在尝试制作我的导航我正在尝试制作我的导航我正在尝试制作我的导航我正在尝试制作我的导航我正在尝试制作我的导航我正在尝试制作我的导航我是尝试制作我的导航我正在尝试制作我的导航

<div class="headercss">class="header">

    <div class="headerlogo">class="header">

    </div>


</div>

/* BODY */

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


/* 1. HEADER */

.headercssheader {
    width: auto;
    height: 500px;
    position: relative;
}

.headerlogoheader {
    width: 980px;
    height: 250px;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

.nav {
    width: 980px;
    height: 70px;
    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;
}

a:hover, a:active {
}

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 标签的自动宽度

Auto width for nav li tags

html

css

size

width

nav