html - 标签要在 jquery ui 模式中的输入左侧对齐

Question

我的 HTML：

<fieldset>
            <label for='descSorteo'>
                Descripción Sorteo</label>
            <input type='text' value='Hoalaa' name='descSorteo' id='descSorteo' class='text ui-widget-content ui-corner-all' />
            <label for='idPremio'>
                Id Premio</label>
            <input type='text' name='idPremio' id='idPremio' class='text ui-widget-content ui-corner-all' />
            <label for='descripcionPre'>
                Descripción</label>
            <input type='text' name='descripcionPre' id='descripcionPre' class='text ui-widget-content ui-corner-all' />
            <label for='tipoPre'>
                Tipo de premio</label>
            <select id='tipoPre'>
                tipoPremioOptions
            </select>
        </fieldset>

我希望我的标签在输入 ex 的左侧保持对齐：

[Label][input]
[Label][input]
[Label][input]

此刻我得到了类似的东西：

[Label]
[Input]

[Label]
[Input]

[Label]
[Input]

我正在使用 jQuery UI 模态对话框表单，谢谢！

Answer 1

这样的事情怎么样？

label {
    display: block;
    float: left;
    width: 200px;
    text-align: right;
    padding-right: 10px;
}
input, select {
    float: left;
    margin-bottom: 10px;
}

示例- http://jsfiddle.net/tj_vantoll/HpSc8/

Answer 2

使用正确的标记：

HTML

<button class="whatever"> Click me</button>

使其成为 Jquery UI 对象：

JS

$('button').button();

并覆盖 Jquery UI 默认值：

CSS

.ui-button {
    text-align: left
}

对于图标，只需在其上放置一个Fontello类。