-1

「:」を縦に揃えたいのですが、どうすればいいですか?

    <td>                                         
        <b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
        <br></br>
        <b>Name</b>:<asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
        <br></br>
        <b>Age</b>:<asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>'></asp:Label>
        <br></br>
        <b>Height</b>:<asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>'></asp:Label>
        <br></br>
        <b>Education</b>:<asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>'></asp:Label>
    </td>
</tr>
4

3 に答える 3

1

フィールドと値を列に分割するだけです。次に、フィールド table-cell を右揃えにするだけです。

CSS:

.left-column
{
    text-align: right;
    font-weight: bold;
}

HTML:

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td class="left-column">
                        ID:
                    </td>
                    <td>
                        <asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Name:
                    </td>
                    <td>
                        <asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Age:
                    </td>
                    <td>
                        <asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Height:
                    </td>
                    <td>
                        <asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Education:
                    </td>
                    <td>
                        <asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>' />
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
于 2013-06-15T14:55:44.253 に答える
0

使用できる要素を使用する必要がありdisplay:inline-blockますvertical-align:middle

編集

私は質問を誤解しました。タグに最小幅を設定できますが<b>、完全にクロスブラウザーではありません:

<style>
    p b { min-width: 50px; display:inline-block; }
</style>
<p><b>Foo</b>:</p>
<p><b>Bar</b>:</p>

ただし、とにかくテーブルを使用しているため、テーブル自体を使用して物事を整列させることをお勧めします

于 2013-06-15T14:46:19.563 に答える
0

またはcolon(:)内にないため、無効なマークアップがあります。変化するbasp:Label

<b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>

これに

<b>ID :</b><asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
于 2013-06-15T14:46:55.750 に答える