html - 在列表元素中对齐标签

Question

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

FIDDLE

代码:

<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>在标签下方。

它们是:

1. 在左手边
2. 它们也是左对齐的。

这显然会给你同样的效果

label {display:block;}