Question

我需要正确对齐左侧的标签，以便文本框和文本区域位于同一位置。我已经添加了一个类来设置宽度，但这样做不正常。

代码：

<div id="feedbackdialogbox">
    <div>
        <h3>Feedback</h3>
    </div>
    <ul>
        <li>
            <label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
            <input type="text" id="feedback_name">
            <br>
        </li>
        <li>
            <label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
            <textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
            <br>
        </li>
        <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>
    <button id="feedback_submit">Send</button>
</div>

CSS

.feedback-label-len {
    width:600px;
}

Answer 1

我想如果我在你的位置，我只需在标签下面添加两个</br>。

他们是：

在左侧
它们也是左对齐的。

这显然会给你带来与

label {display:block;}

enter image description here

Answer 2

向标签添加display：block对于简单表单来说是一个很好的解决方案。如果你打算将它们并排放置......

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

Answer 3

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

JSFIDDLE

Answer 4

我会用一张桌子 JSFIDDLE

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

Answer 5

您可以尝试使用的一种方法是使用表格来格式化数据。使用表格，tr（表格行）和td（表格数据）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>

只是你知道这种方法可能会扰乱html纯粹主义者。该标签旨在实际显示表格数据，并将其用于其他目的，例如格式化有时被旧学校网络编码员认为是不合适的。然而，我无法找到由此格式化数据导致的实际问题，这样做是您制作页面的最简单方法，例如您要问的页面。

我希望这回答了你的问题，如果你需要我扩展这个问题，但当我运行上面的代码时，它给了我一些与你描述的非常相似的东西。

对齐列表元素中的标签

5 个答案: