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

このように強制する方法：

Test Joe
mailto@gmail.com
P: (800) 555-5555 ext. 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 {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
于 2012-11-22T05:13:43.640 に答える
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

はい、この問題を修正するのは難しくありません。
タグのデフォルト設定 (ユーザーの Web ブラウザーによって決定される) を変更するには、タグの CSS スタイルを記述する必要があります。
タグ間の距離に影響を与えることができる 2 つのプロパティがあります。1 つ目はマージンと呼ばれ、これには 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>に隣接するその他のもののいずれかです
。

この回答はこの質問の解決策として選択されていませんが、Web のレイアウトをスタイル設定するために html と CSS で使用されるプロパティの図を次に示します。 ここに画像の説明を入力

プログラミングのほとんどの場合、同じ答えに到達する方法はたくさんあります。サイト全体で同様の問題を解決する方法に一貫性があることを確認してください.

于 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 />タグはなるべく使わないようにしています。<div>HTML マークアップ ( など)を使用して、スタイルではなくドキュメントの構造<br />のみを提供する方がはるかに優れていることがわかりました。

Web ページのスタイル(間隔、フォント、色など)を扱うときは、CSS を使用した方がうまくいきました。

于 2012-11-22T05:04:17.480 に答える