Html 垂直对齐一行中的元素。

Question

我在表格的每一行中有 4 个元素。在带有 css 的特定页面宽度下，我希望每一行只包含 1 个标签和 1 个文本框，其他元素跳到下面。 [![在此处输入图片描述][1]][1]`

        <! Legend to group player information>
        <legend class="legend_player_information" align="center">Player Information</legend>

        <! Table labeling the table within player information>
        <table class="table_player_information" align="center">

            <! Row 1 within player information>
            <tr class="row_player_information_name">
                <td class="element_player_information_name_label" valign="top"><label for="element_player_information_name_label">Name:</label></td>

                <td class="element_player_information_name_text" valign="top"><input type="text" placeholder="Name" name="element_player_information_name_text" maxlength="50" size="20"></td>

                <td class="element_player_information_nickname_label" valign="top"><label for="element_player_information_nickname_label">Nickname:</label></td>

                <td class="element_player_information_nickname_text" valign="top"><input type="text" placeholder="Nickname" name="element_player_information_nickname_text" maxlength="30" size="20"></td>
            </tr>

            <! Row 2 within player information>
            <tr class="row_player_information_email_address">

                <td class="element_player_information_email_address_label" valign="top"><label for="element_player_information_email_address_label">Email Address:</label></td>

                <td class="element_player_information_email_address_text" valign="top"><input type="text" placeholder="Email Address" name="element_player_information_email_address_text" maxlength="50" size="20"></td>

                <td class="element_player_information_school_label" valign="top"><label for="element_player_information_school_label">School:</label></td>

                <td class="element_player_information_school_text" valign="top"><input type="text" placeholder="School" name="element_player_information_school_text" maxlength="30" size="20"></td>
            </tr>

`

Answer 1

以多行显示表格行不是一个好习惯。更好的方法是使用 div block 并根据屏幕大小覆盖它们的样式。这应该可以解决问题:

    @media (max-width:desired width){
    your styles
    }

此外，您只需将类添加到您的 div block ，就可以使用引导网格系统来做所有事情 http://getbootstrap.com/css/#grid-media-queries .