對齊表單元素

我正在嘗試創建輸入約會的表單。對齊表單元素

我希望它呈現這樣的：

Title [input] 
When [input] 
[] Repeat...

其中[]應該說明一個複選框和[輸入]應該說明輸入字段OG類型的文本。

下面是我的HTML和CSS：

.align { 
 
    clear: left; 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 
input[type=text], 
 
select { 
 
    clear: right; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
#repeat { 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 
#repeat_text { 
 
    float: left; 
 
}

<div id="dialog-form" title="Create new appointment"> 
 
    <form> 
 
    <label class="align" for="title">Title</label> 
 
    <input type="text" name="title" id="title"> 
 
    <label class="align" for="when">When</label> 
 
    <input type="text" name="when" id="when"> 
 

 
    <input id="repeat" type="checkbox"> 
 
    <label id="repeat_text" for="repeat">Repeat...</label> 
 
    <div id="repeat_properties"> 
 
     ... 
 
    </div> 
 
    </form> 
 
</div>

的問題是，我#repeat和#repeat_text元素不斷旁邊移動到了我的另外兩個其他表單元素。任何人都知道如何使它們正確渲染？

來源

2014-12-07 user672009

1）添加規則clear: left;上#repeat類

2）從#repeat類刪除寬度

#repeat 
{ 
    display: inline-block; 
    float: left; 
    text-align: left; 
    clear: left; 
}

FIDDLE

來源

2014-12-07 10:15:02 Danield

的一種方法來實現這一佈局是將每一對label和input標籤都包裝在p標籤中。

如果你這樣做，在CSS中不需要修改。

.align { 
 
    display: inline-block; 
 
    float: left; 
 
    clear: left; 
 
    width: 30%; 
 
    text-align: left; 
 
} 
 

 
input[type="text"], select { 
 
    display: inline-block; 
 
    float: left; 
 
    clear: right; 
 
} 
 

 
#repeat 
 
{ 
 
    display: inline-block; 
 
    float: left; 
 
    width: 30%; 
 
    text-align: left; 
 
} 
 
#repeat_text 
 
{ 
 
    float: left; 
 
}

<div id="dialog-form" title="Create new appointment"> 
 
    <form> 
 
    <p><label class="align" for="title">Title</label> 
 
    <input class="align" type="text" name="title" id="title"></p> 
 
    
 
    <p><label class="align" for="when">When</label> 
 
    <input class="align" type="text" name="when" id="when"></p> 
 

 
    <p><input id="repeat" type="checkbox"> 
 
    <label for="repeat">Repeat...</label></p> 
 
    <div id="repeat_properties"> 
 
     ... 
 
    </div> 
 
    </form> 
 
</div>

來源

2014-12-07 10:16:33

可以使用花車單獨那樣簡單實現佈局如下：

input, 
 
label { 
 
    float: left; 
 
} 
 
.align { 
 
    clear: left; 
 
    width: 30%; 
 
    text-align: left; 
 
} 
 
#repeat { 
 
    clear: left; 
 
}

<div id="dialog-form" title="Create new appointment"> 
 
    <form> 
 
    <label for="title" class="align">Title</label> 
 
    <input type="text" id="title" name="title"> 
 
    <label for="when" class="align">When</label> 
 
    <input type="text" id="when" name="when"> 
 
    <input type="checkbox" id="repeat"> 
 
    <label for="repeat">Repeat...</label> 
 
    <div id="repeat_properties"> 
 
     ... 
 
    </div> 
 
    </form> 
 
</div>

來源

2014-12-07 10:23:24

對齊表單元素

回答

相關問題