Css 需要帮助调整表单元素吗
我想创建一个像附加图像一样的表单。我不想让文本字段与输入标记内联，而是让所有字段在表单右侧垂直对齐。[（见下图）][2] 我有这个html：Css 需要帮助调整表单元素吗,css,html,forms,Css,Html,Forms,我想创建一个像附加图像一样的表单。我不想让文本字段与输入标记内联，而是让所有字段在表单右侧垂直对齐。[（见下图）][2] 我有这个html： #表单#容器{ 宽度：300px； 明确：两者皆有； 左边距：50像素； 颜色：#FFFFFF； 边缘顶部：10px； 边缘底部：10px； } #表单容器输入{ 宽度：60%； 明确：两者皆有； 左缘：40%； } #form_容器文本区{ 宽度：60%； 明确：两者皆有； 最大宽度：300px； 左缘：40%； } #form_集装箱标签{ 显示：块
#表单#容器{
宽度：300px；
明确：两者皆有；
左边距：50像素；
颜色：#FFFFFF；
边缘顶部：10px；
边缘底部：10px；
}
#表单容器输入{
宽度：60%；
明确：两者皆有；
左缘：40%；
}
#form_容器文本区{
宽度：60%；
明确：两者皆有；
最大宽度：300px；
左缘：40%；
}
#form_集装箱标签{
显示：块；
宽度：38%；
}
添加事件
姓名/地点：
日期：
简要说明：
行程负责人：
领导联系#：
颜色：#000000来自此类#表单_容器
将float:left
赋予此类#表单_容器标签
删除左边距：40%从这个类#form_container input
，#form_container textarea
这就是您想要实现的吗
复制粘贴此代码在您的html和匹配您的图像
您的HTML代码
<body>
<h1>Add New Event</h1>
<div id="form_container">
<form method="post" enctype="multipart/form-data" name="form1" id="event_form">
<table>
<tr>
<td>
<label for="textfield">Name/location:</label>
</td>
<td>
<input name="textfield" type="text" required id="location">
</td>
</tr>
<tr>
<td>
<label for="date">Date:</label>
</td>
<td>
<select>
<option>dd</option>
<option>01</option>
<option>02</option>
</select> :
<select>
<option>mm</option>
<option>01</option>
<option>02</option>
</select> :
<select>
<option>yy</option>
<option>2013</option>
<option>2014</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="textarea">Brief description:</label>
</td>
<td>
<textarea name="textarea" cols="40" rows="4" required id="description"></textarea>
</td>
</tr>
<tr>
<td>
<label for="textfield2">Trip leader:</label>
</td>
<td>
<input name="textfield2" type="text" required id="leader">
</td>
</tr>
<tr>
<td>
<label for="tel">Leaders contact #:</label>
</td>
<td>
<input name="tel" type="tel" required id="leader_phone" maxlength="10">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" id="submit" value="Submit" style="width:20%">
</td>
</tr>
</table>
</form>
</div>
</body>
表单初始化后缺少一个
，上次输入后缺少一个
，请添加它。没有解决问题，但可能已经解决了未来的问题谢谢！工作完美。如果允许，我将在6分钟内标记为正确答案！是的，你用的方法基本上和Bindiya一样，效果不错。谢谢你的帮助
<body>
<h1>Add New Event</h1>
<div id="form_container">
<form method="post" enctype="multipart/form-data" name="form1" id="event_form">
<table>
<tr>
<td>
<label for="textfield">Name/location:</label>
</td>
<td>
<input name="textfield" type="text" required id="location">
</td>
</tr>
<tr>
<td>
<label for="date">Date:</label>
</td>
<td>
<select>
<option>dd</option>
<option>01</option>
<option>02</option>
</select> :
<select>
<option>mm</option>
<option>01</option>
<option>02</option>
</select> :
<select>
<option>yy</option>
<option>2013</option>
<option>2014</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="textarea">Brief description:</label>
</td>
<td>
<textarea name="textarea" cols="40" rows="4" required id="description"></textarea>
</td>
</tr>
<tr>
<td>
<label for="textfield2">Trip leader:</label>
</td>
<td>
<input name="textfield2" type="text" required id="leader">
</td>
</tr>
<tr>
<td>
<label for="tel">Leaders contact #:</label>
</td>
<td>
<input name="tel" type="tel" required id="leader_phone" maxlength="10">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" id="submit" value="Submit" style="width:20%">
</td>
</tr>
</table>
</form>
</div>
</body>
#form_container{
float:left;
clear: both;
color:#FFFFFF;
font-family: "Calibri";
}
h1{
font-family: "Calibri";
}
#form_container input{
width: 60%;
clear: both;
}
#btn_submit{
width: 20%;
clear: both;
}
#form_container textarea{
width: 60%;
clear: both;
max-width:300px;
}