Question

我正在为网站的菜单栏工作，除了某些原因我无法更改每个菜单项的宽度。我尝试过使用min-width，max-width，删除一些样式，添加新样式，但我似乎无法找到相互冲突的样式。有任何想法吗？

HTML：

<div id="header-container">
<div id="header">
    <nav class="nav-bar">
        <ul>
            <li id="homeLink"><a href="#">home</a>
            </li>
            <li><a href="#">portfolio</a>
            </li>
            <li><a href="#">about</a>
            </li>
            <li><a href="#">contact</a>
            </li>
        </ul>
    </nav>
</div>
</div>

CSS：

div#header-container {
                background-color: rgba(245, 246, 250, 0.29);
                height: 75px !important;
                min-width: 100%;
                z-index: 1;
                position: fixed;
                top: 0;
            }
            div#header {
                max-width: 768px;
                margin: 0 auto;
                padding: 0;
                color: #FFF;
                top: 0;
            }
            div#header ul {
                height: 75px;
                list-style-type: none;
                /*li:hover {
                min-height: $menuHeight;
                background-color: #F0F8FF;
              }*/
            }
            div#header ul li {
                text-align: center;
                height: 75px;
                line-height: 75px;
                transition: background-color 1s;
                -webkit-transition: background-color 1s;
                display: inline;
                width: 100px;
                padding: 0;
                margin: 0;
            }
            div#header ul #homeLink {
                min-width: 150px;
            }

谢谢！任何帮助表示赞赏。

Answer 1

使用display: inline-block;代替display: inline;

Demo Fiddle

Answer 2

问题是您已使用display: inline; div#header ul li而width不适用于inline元素，因此请改为display: inline-block;。

Demo

此外，您在id元素上声明li，并且它们应该是唯一的，因此在每个元素上定义id似乎很乏味，所以如果您不想添加对每个元素id，您仍然希望对每个width应用不同的li，而不是使用:nth-child伪...

div#header ul li:nth-child(1) {
    /* Targets 1st li */
}

div#header ul li:nth-child(2) {
    /* Targets 2nd li */
}

等等......这样您就不必在每个id元素上声明li。

宽度不适用于li元素

2 个答案: