html - 什么元素阻止我的宽度属性应用于我的选项卡？

Question

我对 HTML、CSS 和 Javascript 完全陌生，但是利用之前关于 Java 和 C 的典型编程知识以及大量教程和谷歌搜索，我拼凑出了这一切如何工作的非常粗略的图像。

现在让我发疯的是我最近在我的网站上添加了一个选项卡式内容框，它位于主页面上，允许您通过单击适当的选项卡来选择 4 个不同段落之一。我把它从教程中解脱出来，对它的工作原理有了基本的了解。但出于某种原因，我无法让它让我调整每个选项卡的宽度。

这是标签的 html:

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>`

这里是相关的 CSS 样式。

#feature-tabs {
    height: 16px;
    width: 150px;
}

ul#tabs {
     list-style-type: none; 
     margin: 0 0 2 0; 
}
    ul#tabs li {
        float: left;
    }
        ul#tabs li a {
            color: #42454a; 
            background-color: #dedbde; 
            border: 1px solid #c9c3ba; 
            border-bottom: none; 
            text-decoration: none;
            width: 150px;
        }
            ul#tabs li a:hover {
                background-color: #f1f0ee;
            }
            ul#tabs li a.selected {
                color: #000; 
                background-color: #f1f0ee; 
                font-weight: bold;
            }

我非常需要这个，所以为了我想要的外观，但我就是找不到为什么无论我把 width: ___px; 放在哪里，它都不适用。

我想知道是否有我正在做的事情阻止宽度成为适用的特征或者你有什么。

提前致谢。

Answer 1

尝试添加此样式:

ul#tabs li a {
    // ..
    display: block;
}

• > DEMO

发生这种情况是因为 a 默认是内联元素。内联元素不会对高度/宽度使用react。

• > Does height and width not apply to span?
• > The Width Property^w3