Asp.net mvc 如何缩小标签的大小

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

：
0) %>
c、 Tag（Tag.UrlEncode（），1），Server.HtmlEncode（Tag），new{@class=“Tag”}）%>

这完全取决于您尝试的样式。它是像段落一样的文本组成部分吗？潜水艇

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

 width:200px;
 height:20px;

等等

---

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

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

---

如果要减小字体大小，请查看“字体大小”属性。此外，请查看line height属性。

此外，如果将其应用于A或SPAN之类的内联元素，则会发现垂直值不适用。您没有提供足够的上下文让我们进行合理的评论-尝试链接到显示问题的页面，我们就不必为您猜测解决方案

仅从实际的类名来看，您似乎在标记云中绑定样式标记？如果是这样的话，我想你可以试着把你的填充物弄小一点，也许：

padding:3px;

如果它们是内联元素，那么您就不会有任何关于边距的运气

---

如果我是一个读心术的人，我只能告诉你更多：）

如前所述，如果你试图降低内联元素的垂直高度，那么顶部或底部边距/填充将无能为力。但是，您可能需要尝试降低文本的行高：

 line-height: 12px;

---

只是不要使行高小于字体大小，否则文本可能会被剪裁。

好的，ASP.NET MVC中的HTML.ActionLink会创建锚定标记（a，也称为“链接”）。默认情况下，标记的显示样式为“内联”。这意味着Bryan M的答案将适合您的需要。只需将行高声明为大于或等于字体大小的高度

另一个选项是将显示样式更改为“内联块”，这将允许您设置显式的高度和宽度。如果希望所有标记的大小相同，则此选项非常有用

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

注意Firefox2的特定语法。FF3没有这个问题

---

这可能有助于阅读您可以在上找到的当前版本。您可能特别感兴趣。

为了将尺寸和/或填充应用于对象，它应该是块级元素，而不是内联元素。s是内联元素，不太适合标记列表之类的东西。请尝试以下方法：

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

.标签{
浮动：左；
边框：1px纯蓝色；
列表样式类型：无；
}
李先生{
浮动：左；
右边距：6px；
字体系列：“新罗马时代”；
}
李先生{
显示：块；
填充：0 5px；
文字装饰：无；
颜色：#330099；
背景色：#99FF33；
}
.李a：悬停{
背景色：#330099；
颜色：#99FF33；
文字装饰：无；
}

c.Tag（Tag.UrlEncode（），1），Server.HtmlEncode（Tag），new{@class=“Tag”}）%%>

---

这将为您提供一个语义正确的标记“列表”，左对齐，并且能够为每个项目提供填充和边距。我还随意添加了一个：hover样式，并删除了“：”（蓝色轮廓正好显示列表本身的大小）。让它旋转一下，希望你喜欢结果，祝你的项目好运

如果不知道您使用的是什么HTML，就很难回答这个问题。HTML元素有自己的默认样式。你的“标签”是DIV、A、SPAN还是其他什么？你能提供一个发生了什么以及你想要什么的图表吗？谢谢。我们需要更多的上下文信息：那些span元素的容器是什么？它的风格是什么？这些标签与StackOverflow中的标签类似。或者它就像一朵云？