2 
<div class="w-box-header" style="text-align: right;">
<div class="footer-text">
My Support Representative
</div>
<div>
<asp:Label ID="mcr_Name" runat="server" Text="Test Joe" /><br />
<asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" /><br />
<asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" /><br />
<asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
</div>
</div>

这<br>导致在标签上方/下方放置大量空间。有什么办法可以覆盖这个间距并使它们正好在彼此下方？

它看起来像这样：

测试乔

mailto@gmail.com

电话：(800) 555-5555 分机。143

女：(555) 555-5555

如何像这样强制它：

测试 Joe
mailto@gmail.com 电话
：(800) 555-5555 分机。143
楼：(555) 555-5555

4

7 回答 7

2

使用 div，并删除 BR

  <div class="w-box-header" style="text-align: right;">
        <div class="footer-text">
            My Engagex Support Representative
        </div>
        <div>
            <div>
                <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" />
           </div>
            <div>
                <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" />
            </div>
            <div>
                <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" />
            </div>
            <div>
                <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" />
            </div>
        </div>
    </div>
于 2012-11-22T04:52:47.330 回答
2

首先，这可能是对<label>. 您没有标记任何内容，只是显示文本。

label 元素表示表单控件的标题 (w3)

其次，<br>应该在线条划分很重要的情况下使用，而不是出于样式目的（请参阅此处）。

对于 ASP.Net，我会使用更简单的结构：

<div><asp:Literal runat="server" text="Foo" /></div>
<div><asp:Literal runat="server" text="Bar" /></div>
<div><asp:Literal runat="server" text="Baz" /></div>

另请参阅：使用语义 HTML5 和微格式标记联系人以获得更高级的技术。

于 2012-11-22T05:12:14.827 回答
0

我会通过 CSS 为您的标签添加填充，将它们的显示更改为阻止，并完全删除 br 标签

于 2012-11-22T04:51:01.973 回答
0

使用 CSS：

<div class="w-box-header" style="text-align: right;">
<div class="footer-text">
My Engagex Support Representative
</div>
<div>
<asp:Label ID="mcr_Name" runat="server" Text="Test Joe"  style="display:inline-block;"/><br />
<asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" style="display:inline-block;"/><br />
<asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" style="display:inline-block;"/><br />
<asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" style="display:inline-block;"/>
</div>
</div>
于 2012-11-22T05:01:45.310 回答
0

是的，这个问题并不难解决。您需要为
标签编写 CSS 样式以更改其默认设置（由用户的 Web 浏览器确定）。
这是可以影响标签之间距离的两个属性。第一个称为边距，这在 Web 浏览器中具有默认值。

下面是一些调整边距的代码：

<html>
<head>
...
<style type="text/css">
br {
margin-top: 5px;
margin-bottom: 5px;
}

</style>

或者，您可能需要更改填充

...
<style type="text/css">
br {
padding-top: 5px;
padding-bottom: 5px;
}
</style>

如果在将它们的值设置为“0px”并且间距仍然存在之后，这些都不起作用，那么问题不在于
标签。它可以是其他标签元素的填充或边距，或者与您的标签<img /> , <p>相邻的任何其他元素。

尽管未选择此答案作为此问题的解决方案，但以下是 html 和 CSS 用于样式化 Web 布局的属性图： 在此处输入图像描述

在大多数编程情况下，有很多方法可以得出相同的答案。只需确保您在解决站点中类似问题的方式上保持一致。

于 2012-11-22T05:04:09.847 回答
0

一个简单的解决方案可能是删除<br />标签，而是使用 CSS 以您希望的方式设置这些线条的样式。如果您想在单独的行上显示每条信息，您可以指定它们应该在 CSS 中显示为“块”。

<div> 
    <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" style="display:block;" />
    <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" style="display:block;" />
    <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" style="display:block;" />
    <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" style="display:block;" />
</div>

为了减少该 CSS 代码的冗长和重复，您可以将样式定义移动到<head>标记中的元素，如下所示：

<head>
    <style type="text/css">
        .block {
            display: block;
        }
    </style>
</head>
<body>
    <div> 
        <asp:Label ID="mcr_Name" runat="server" Text="Test Joe" class="block" />
        <asp:Label ID="mcr_email" runat="server" Text="mailto@gmail.com" class="block" />
        <asp:Label ID="mcr_phone" runat="server" Text="P: (800) 555-5555 ext. 143" class="block" />
        <asp:Label ID="mcr_fax" runat="server" Text="F: (555) 555-5555" class="block" />
    </div>
</body>

<br />我个人尽可能避免使用标签。我发现使用 HTML 标记（如<div>等<br />）只提供文档的结构而不提供样式要好得多。

在处理网页样式（间距、字体、颜色等）时，坚持使用 CSS 取得了更大的成功。

于 2012-11-22T05:04:17.480 回答
0

把它放在你的 CSS 中

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
于 2012-11-22T05:13:43.640 回答