哪个元素阻止我的宽度属性应用于我的选项卡？

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 默认情况下是内联元素。内联元素不会对高度/宽度做出反应。

• 高度和宽度不适用于跨度吗？
• 宽度属性^w3

Answer 2

将以下规则添加到您的链接：

ul#tabs li a { display: inline-block; }