使CSS选项卡具有特定的宽度和高度

时间:2009-07-25 23:26:43

标签: html css

我正在尝试设置CSS标签,我希望它们的高度和宽度相同。我如何使用以下CSS执行此操作:

#master_tab_layout
{
        height: 35px;
}


#master_tab_layout li
{
        display: inline;
        overflow:hidden;
        list-style-type:none;
        background-color:#FE000C;
}

#master_tab_layout a, a.active
{
        color: #DEDECF;
        background: #0EB1E8;
        font: bold 1em "Trebuchet MS", Arial, sans-serif;
        border: 2px solid black;
        padding: 2px 5px 0px 5px;
        margin: 0;
        width:150px;
        text-decoration: none;
}

#master_tab_layout a.active
{
        background: #FE000C;
        border-bottom: 3px solid #ABAD85;
}

#master_tab_layout a:hover
{
        color: #fff;
        background: #FFF;
}

#master_tab_layout a:visited
{
        color: #E8E9BE;
}

#master_tab_layout a.active:hover
{
        background: #FE000C;
        color: #DEDECF;
}

...以及随后的HTML:

<div id="master_tab_layout">
  <ul>
    <li><a href="/howtoorder">How To Order</a></li>
    <li><a href="/about_us">About Us</a></li>
  </ul>
</div>

3 个答案:

答案 0 :(得分:2)

#master_tab_layout ul li {
width: 50px;
height: 25px;
}

那只是设定尺寸。如果你想让它们垂直,你需要使用display:block;

另外,不要使用:active来更改字体。它可能会改变大小并使用户烦恼。

答案 1 :(得分:0)

将所有master_tab_layout更改为#master_tab_layout

答案 2 :(得分:0)

如果希望链接的大小达到相同的宽度和高度,请在列表中声明链接以显示为块元素。否则,将忽略宽度和高度的任何设置,因为它是内联元素。请参阅下面的行,您需要添加到您已经拥有的#master_tab_layout a的CSS声明中。

#master_tab_layout a
{
    display:block;
}

现在,您可以将标签列表中的heightwidth链接设置为您希望的大小。

要使列表项不会相互坐在一起并且并排坐着,您还需要浮动li个元素。请参阅下面的行,您应该添加到您已经拥有的#master_tab_layout li的CSS声明中。

#master_tab_layout li
{
    float:left;
    margin:0 2px 0 0;
}

上面设置的margin会在列表中的每个项目的右侧放置一个薄的2像素缓冲区,这样它们就不会相互抵消。

当您将鼠标悬停在其中一个链接上时,您还会在白色背景上显示白色文字。如果你有一个对比的文字颜色,这将是一个好主意,这样用户仍然可以知道他们正在悬停的标签/链接。也许是这样的:

#master_tab_layout a:hover
{
    color: #000;
    background: #fff;
}