Question

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

 导致大量空间被放置在标签上方/下方。有没有办法覆盖这个间距，让它们在彼此之下？

看起来像这样：

测试Joe

mailto@gmail.com

P：（800）555-5555分机143

F：（555）555-5555

如何强制这样：

测试乔
mailto@gmail.com
P：（800）555-5555转143个
F：（555）555-5555

Answer 1

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

Answer 2

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

label元素表示表单控件的标题（w3）

其次， 应该在线的划分很重要的地方使用，而不是用于样式目的（见here）。

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

另请参阅：Marking up contacts using semantic HTML5 & microformats了解更多高级技巧。

Answer 3

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

Answer 4

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

Answer 5

是的，这个问题并不难解决。您需要为
标签编写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 /> , 或其他与您的标记相邻的标记。

虽然没有选择这个答案作为这个问题的解决方案，但这里是html和CSS用于为web格式化样式的属性图： enter image description here

在大多数编程案例中，有很多方法可以达到相同的答案。只需确保您在整个网站上解决类似问题的方式一致。

Answer 6

一个简单的解决方案可能是删除 标记，而是使用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>

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

在处理网页的样式（间距，字体，颜色等）时，我在CSS上取得了更好的成功。

Answer 7

把它放在你的CSS中

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

间距问题与

7 个答案: