Question

我是HTML，CSS和Javascript的新手，但是借鉴了Java和C的典型编程的先前知识以及大量的教程和谷歌搜索，我一直在拼凑一个关于这一切是如何工作的非常粗略的图像。 / p>

现在让我发疯的事情是我最近在我的网站上添加了一个标签式内容框，主页上有一个允许您通过单击相应选项卡选择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是内联元素。内联元素不会对高度/宽度做出反应。

Answer 2

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

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

什么元素阻止我的宽度属性应用于我的标签？

2 个答案: