Html 在列表元素中对齐标签_Html_Css

Html 在列表元素中对齐标签

html css

Html 在列表元素中对齐标签,html,css,Html,Css,我需要正确对齐左侧的标签，以便文本框和文本区域位于同一位置..我添加了一个类来设置宽度，但无法正常工作代码：我想如果我处在你的位置，我会在标签下面加两个它们是：在左手边它们也是左对齐的很明显，这会给你和我一样的效果 label {display:block;} 对于一个简单的表单来说，在标签中添加display:block是一个很好的解决方案。如果你想把它们并排放在一起 label {display: block; float: left} li {overflow: hidde

我需要正确对齐左侧的标签，以便文本框和文本区域位于同一位置..我添加了一个类来设置宽度，但无法正常工作

代码：

我想如果我处在你的位置，我会在标签下面加两个

它们是：

在左手边

它们也是左对齐的

很明显，这会给你和我一样的效果

label {display:block;}

对于一个简单的表单来说，在标签中添加display:block是一个很好的解决方案。如果你想把它们并排放在一起

label {display: block; float: left}
li {overflow: hidden

我会用桌子。


（可选）告诉我们您是谁
我们怎样才能做得更好？
您向同事推荐价格的可能性有多大（1表示不太可能，5表示非常可能）？

您可以尝试使用的一种方法是使用表来格式化数据。使用table、tr（table row）和td（table data）html标记，我们可以在不使用CSS的情况下对数据进行格式化，从而使它们的间距正确

<DOCTYPE html>
<html>
<head>
</head>
    <body>
        <div id="feedbackdialogbox">
            <div>
                <h3>Feedback</h3>
            </div>
            <table>
                <ul>
                    <tr>
                        <td>
                            <li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
                        <td><input type="text" id="feedback_name"></td>

                    </tr>
                    <tr>
                        <td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
                        <td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>

                    </li></tr>
                    <li>
                        <div id="radio_button_list_title_wrapper">
                            <div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
                        </div>
                        <br>
                    </li>
                </ul>
            </table>
            <button id="feedback_submit">Send</button>
        </div>
    </body>
</html>


反馈

（可选）告诉我们您是谁
我们怎样才能做得更好


您向同事推荐价格的可能性有多大（1表示不太可能，5表示非常可能）？




邮寄

正如您所知，这种方法可能会让html纯粹主义者感到不安。该标记被设计为实际显示表数据，并将其用于其他目的，例如格式化，这有时被老式的web编码人员认为是不合适的。然而，我还没有发现像这样格式化数据所导致的实际问题，这样做是制作像您正在询问的页面这样的页面的最简单方法

我希望这回答了您的问题，如果您需要我对此进行扩展，请提问，但当我运行上面的代码时，它给了我与您描述的非常类似的东西。

只要打断这条线，它就会看起来更好。

display:block用于
label {display: block; float: left}
li {overflow: hidden

.feedback-label-len {
    display: block;
}

<form method="post" action="feedback.php">
                            <table id="feedbackTable">
                              <tr>
                                <th><label for="txtName">(Optional) tell us who you are</label></th>
                                <td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
                              </tr>
                              <tr>  
                                <th class="message"><label for="">How can we do better?</label></th>
                                <td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
                              </tr>
                              <tr>  
                                <th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
                                <td><input  type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
                              </tr>

                              <tr>
                                <th><label title="Send"></label></th>
                                <td><input type="submit" style="color:#000000" value="Send" /></td>
                              </tr>
                             </table>
                        </form>

<DOCTYPE html>
<html>
<head>
</head>
    <body>
        <div id="feedbackdialogbox">
            <div>
                <h3>Feedback</h3>
            </div>
            <table>
                <ul>
                    <tr>
                        <td>
                            <li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
                        <td><input type="text" id="feedback_name"></td>

                    </tr>
                    <tr>
                        <td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
                        <td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>

                    </li></tr>
                    <li>
                        <div id="radio_button_list_title_wrapper">
                            <div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
                        </div>
                        <br>
                    </li>
                </ul>
            </table>
            <button id="feedback_submit">Send</button>
        </div>
    </body>
</html>