文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Blueprint中格式化选项卡？

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

Stack Overflow用户

提问于 2009-02-12 15:36:43

回答 1查看 2.2K关注 0票数 0

我在下面插入了一个图片，显示了我目前的立场(css版本)和我想要的地方(基于表格的版本)。

我最初用表格创建了这个布局，我想移到一个基于css的版本。我要向你告辞了。

我在使用Blueprint。

当前问题：

，

，在我想要消除的选项卡之间有一个空白。如何消除这个空白呢？

，

，我想在每个选项卡中放置更多的填充。如何在不将选项卡推到下一行的情况下完成此操作？

<!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>

css

blueprint-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-02-12 21:15:47

在你发布的截图中没有标签之间的空白。

至于将填充添加到选项卡，您可以这样做：

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

这给链接顶部和底部填充3px和左和右填充5 5px。这很好，因为它给你一个更大的点击目标。

你说你不想包装，但根据我在屏幕截图上所能看到的，那里根本没有足够的空间。你要么让字体变小，要么用较短的词组作为标签。也许这个？

<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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/541839

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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