如何在Blueprint CSS中格式化选项卡？

时间：2021-10-30 07:15:30

I've inserted an image below showing were I currently stand (css version) and where I want to be (tabled based version).

我在下面插入了一张图片,展示了我目前的展位(css版本)以及我想要的位置(基于表格的版本)。

I originally created this layout with tables and I would like to move to a css based version. I have a long way to go.

我最初用表格创建了这个布局,我想转向基于CSS的版本。我还有很长的路要走。

I'm using Blueprint CSS.

我正在使用Blueprint CSS。

Current issues:

  • There is a gap between the tabs that I'd like to get rid of. How do I get rid of this gap?

    • 我希望摆脱的标签之间存在差距。我如何摆脱这种差距?

  • I would like to put more padding inside each tab. How do I do this without pushing the tabs onto the next line?

    • 我想在每个标签内添加更多填充。如何在不将标签推到下一行的情况下执行此操作?

如何在Blueprint CSS中格式化选项卡？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Heatmap using BluePrint</title>
    <!-- Framework CSS -->
    <link rel="stylesheet" href="/heatmap/styles/blueprint/screen.css" type="text/css"
        media="screen, projection">
    <link rel="stylesheet" href="/heatmap/styles/blueprint/print.css" type="text/css"
        media="print">
    <!--[if IE]><link rel="stylesheet" href="/heatmap/styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <style type="text/css">

    body{font-size:70%;font-family:Verdana, "Helvetica Neue", Arial, Helvetica, sans-serif;padding:5px;}    
    table.heatmap td {border: 1px solid black;}
    table.heatmap{border-collapse:collapse;}

    a {color:black;text-decoration: none;}
    a:hover {text-decoration: underline;}

    .list-as-tabs
    {
        margin-left:0px;
    }
    .list-as-tabs, .list-as-tabs li
    {
        display: inline;

    }

    .hover-links
    {
        background-color:#fffdbf;
    }
    .hover-links li a:hover
    {
        background-color:yellow;    
    }    
    table.heatmap tr td {text-align:center;}

    </style>
</head>
<body>

    <div class="container">
        <div class="span-20">
            <div class="prepend-5 span-10">
                <h3>
                    Issuer Heatmap</h3>
            </div>
            <div class="span-5 last">
                <ul class="list-as-tabs">
                    <li><a href="javascript:popUp('legend.htm')">Legend</a></li>
                    <li><a href="http://localhost/heatmap/default.aspx?level=heatmap&feedback=true"><img src="/heatmap/images/lightbulb.gif" alt="Send Feedback about Heatmap." /></a></li>
                    <li><input type="image" src="/heatmap/images/excel-mini.gif" alt="Export Heatmap to Excel." /></li>
                    <li><a href="print.aspx" target="_blank"><img src="/heatmap/images/printer.gif" alt="Print this page." /></a></li>
                </ul>
            </div>
            <div class="prepend-5 span-15 last">
                <ul class="list-as-tabs hover-links">
                    <li><a href="#">View Draft Heatmap</a></li>
                    <li><a href="#">Manage Security</a></li>
                    <li><a href="#">Edit Heatmap and Platforms</a></li>
                    <li><a href="#">View Revision History</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

1 个解决方案

#1

There's no gap between tabs in the screenshot you posted.

您发布的屏幕截图中的标签之间没有差距。

As for adding padding to the tabs, you can do this:

至于向标签添加填充,您可以这样做:

.list-as-tabs li a {
    padding: 3px 5px;
}

That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.

这使得链接顶部和底部填充为3px,左右填充为5px。这很好,因为它为您提供了更大的点击目标。

You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?

你声明你不想包装,但从我在屏幕截图上看到的内容来看,根本没有足够的空间。你要么必须缩小字体,要么使用较短的短语作为标签。也许这个?

<ul class="list-as-tabs hover-links">
    <li><a href="#">Draft Heatmap</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">Edit Heatmap/Platforms</a></li>
    <li><a href="#">Revision History</a></li>
</ul>

#1

There's no gap between tabs in the screenshot you posted.

您发布的屏幕截图中的标签之间没有差距。

As for adding padding to the tabs, you can do this:

至于向标签添加填充,您可以这样做:

.list-as-tabs li a {
    padding: 3px 5px;
}

That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.

这使得链接顶部和底部填充为3px,左右填充为5px。这很好,因为它为您提供了更大的点击目标。

You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?

你声明你不想包装,但从我在屏幕截图上看到的内容来看,根本没有足够的空间。你要么必须缩小字体,要么使用较短的短语作为标签。也许这个?

<ul class="list-as-tabs hover-links">
    <li><a href="#">Draft Heatmap</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">Edit Heatmap/Platforms</a></li>
    <li><a href="#">Revision History</a></li>
</ul>
标签：

相关文章