Question

对css很新，并试图让我的页面上的标签更小。修改的最佳设置是什么？保证金似乎没有做我想要的。

.story .content .tags .tag
{
    margin: 10px 5px 10px 5px;
    background-color: #99FF33;
    font-weight: 500;
    color: #330099;
    font-style: inherit;
    font-family: 'Times New Roman';
    padding-right: 6px;
}

这是相关的片段，我想让链接垂直变小。我是否需要明确指定高度？：

<span class="tags"><span class="text">:</span>
                    <% for (int i = 0; i < story.Tags.Length; i++) %>
                    <% { %>
                    <%     string tag = story.Tags[i]; %>
                    <%     if (i > 0) %>
                    <%     { %>
                    <%=         " "%>
                    <%     } %>
                    <%=     Html.ActionLink<StoryController>(c => c.Tag(tag.UrlEncode(), 1), Server.HtmlEncode(tag), new { @class = "tag" })%>
                    <% } %>
                </span>

Answer 1

这完全取决于你想要设计的风格。它是像段落一样的文本组件吗？一个Div？

您可以在div上使用宽度和高度。

 width:200px;
 height:20px;

等

但我们需要一些HTML来推荐有意义的解决方案。

Answer 2

如前所述，如果您尝试降低内联元素的垂直高度，则顶部或底部边距/填充将不会执行任何操作。但是，您可能希望尝试减小文本的行高：

 line-height: 12px;

只是不要让行高比font-size小一些，否则你的文字可能会被剪裁。

Answer 3

我认为你正在寻找填充物。我的猜测是你希望减少文本边缘和背景颜色停止填充的位置（基本上）和边框开始的位置之间的间距，更改填充将产生你想要的效果。

如果要减小字体大小，请查看font-size属性。另外，请查看line-height属性。

Answer 4

此外，如果您将其应用于内联元素（如A或SPAN），您会发现垂直值不适用。您没有为我们提供足够的背景来明智地评论 - 尝试链接到显示问题的页面，我们不必为您猜测解决方案！

Answer 5

从实际的类名来看，你似乎想要在标签云中标记样式标签？如果是这种情况，我想你可能想尝试让你的填充更小一点：

padding:3px;

如果它们是内联元素，那么您将无法获得利润。

如果我是读者，我只能告诉你更多信息：）

Answer 6

好的，ASP.NET MVC中的HTML.ActionLink创建了锚标签（A，又名“链接”）。默认情况下，标签的显示样式为“内联”。这意味着Bryan M的答案将满足您的需求。只需将行高声明为大于或等于字体大小的高度。

另一种选择是将显示样式更改为“inline-block”，这样可以设置明确的高度和宽度。如果您希望所有标记的大小相同，这非常有用。

.tag
{
    display: -moz-inline-block; /* For FF2 */
    display: inline-block; /* For everyone else */
    height: 12px;
    overflow: hidden;
}

请注意FireFox 2的特定语法。 FF3没有这个问题。

阅读CSS standard (2.1)处可以找到的当前W3C可能会有所帮助。您可能会对Visual formatting model section具体感兴趣。

Answer 7

为了将尺寸和/或填充应用于对象，它应该是块级元素，而不是内联元素。＆lt; span＆gt;是内联元素，不太适合像标签列表这样的东西。尝试这样的事情：

<style>
.tags {
float: left;
border: 1px solid blue;
list-style-type: none;
}
    .tags li {
    float: left;
    margin-right: 6px;
    font-family: 'Times New Roman';
    }
        .tags li a {
        display: block;
        padding: 0 5px;
        text-decoration: none;
        color: #330099;
        background-color: #99FF33;
        }
            .tags li a:hover {
            background-color: #330099;
            color: #99FF33;
            text-decoration: none;
            }
</style>


<ul class="tags">
    <% for (int i = 0; i < story.Tags.Length; i++) { %>
        <% string tag = story.Tags[i]; %>
        <li><%= Html.ActionLink<StoryController>(c => c.Tag(tag.UrlEncode(), 1), Server.HtmlEncode(tag), new { @class = "tag" })%></li>
    <% } %>
</ul>

这将为您提供一个语义正确的标签“列表”，左对齐并具有为每个项目赋予填充和边距的能力。我也冒昧地添加了一个：悬停样式并删除了“：”（蓝色轮廓就是为了显示列表本身的大小）。给它一个旋转，希望你喜欢结果，祝你的项目好运！

如何缩小标签的大小

7 个答案: