Question

我在下面插入了一张图片，展示了我目前的情况（css版本）以及我想要的位置（基于表格的版本）。

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

我正在使用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>

Answer 1

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

至于向标签添加填充，您可以这样做：

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

这给出了3px的链接顶部和底部填充以及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>

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

1 个答案: