我想在表格的左侧放置一个td
元素并使其跨越多行。在td
元素的右侧,我想在原始td
元素的每一行中对齐多个td
元素。但是,由于我吮吸HTML / CSS,我最近的尝试看起来像这样。
我希望Territory
标签和输入文本框位于Effective on this date
标签/输入下方。 (用我的艺术/油漆天赋突出我想要领土的东西去)
HTML /剃须刀
<table class="boxMe">
<tr>
<td id="zipBox">
@Html.Raw("Zip Code")
@Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })
</td>
<td id="dateBox">
@Html.LabelFor(model => model.searchDate)
@Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})
</td>
<td id="stateBox">
@Html.LabelFor(model => model.searchState)
@Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ")
<button type="submit" id="SearchButton">Search</button>
</td>
</tr>
<tr>
<td id="terrSearch">
@Html.LabelFor(model => model.searchTerritory)
@Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
</td>
</tr>
</table
CSS
#zipBox {
float: left;
padding-left: 20px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
vertical-align: top;
row-span: 2;
border:none;
}
#dateBox {
float: left;
padding-right: 10px;
padding-top: 20px;
border:none;
}
#stateBox {
float: left;
padding-right: 20px;
padding-top: 20px;
border:none;
}
#terrSearch {
border:none;
}
.boxMe
{
float: left;
border: 1px solid Silver;
padding: 3px;
}
答案 0 :(得分:1)
我知道它并没有直接回答你的问题,但你真的不应该使用表格来定位元素。表应该用于表格数据表示。在这里可能应该使用Div。 以下是如何使用divs
实现我认为您想要的内容的示例CSS
.container{
width: 660px;
}
.container div {
float: left;
width: 200px;
}
HTML
<div class="c1">zip code
<textarea>12345</textarea>
</div>
<div class="c2">
<div>Effective on this date:
<input type="text" />
</div>
<div>Territory:
<input type="text" />
</div>
</div>
<div class="c3">
State:
<select>
<option value="IL">IL</option>
<option value="WA">WA</option>
<option value="MI">MI</option>
</select>
</div>
</div
&GT;
答案 1 :(得分:0)
这是非常基本的。看:
<table class="boxMe">
<tr>
<td rowspan="2">
@Html.Raw("Zip Code")
@Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })
</td>
<td>
@Html.LabelFor(model => model.searchDate)
@Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})
</td>
<td>
@Html.LabelFor(model => model.searchState)
@Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ")
</td>
</tr>
<tr>
<td>
@Html.LabelFor(model => model.searchTerritory)
@Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
</td>
<td>
<button type="submit" id="SearchButton">Search</button>
</td>
</tr>
</table>
请参阅?简单。现在,表格格式正确,每行和每列的单元格总数在正确的网格中。表格不需要CSS。如果需要,您可以为字段添加CSS,但这个HTML就是您所需要的。
答案 2 :(得分:0)
以为我会发布最终结果,因为它与提供的答案略有不同,但使用相同的概念:
<强> HTML /剃须刀
<div id="searchBox" class="boxMe">
<div id="zipBox">
@Html.Raw("Zip Code")
@Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })
</div>
<div id="dateBox">
@Html.LabelFor(model => model.searchDate)
@Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})
<div id="terrBox">
@Html.LabelFor(model => model.searchTerritory)
@Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
</div>
</div>
<div id="stateBox">
@Html.LabelFor(model => model.searchState)
@Html.DropDownListFor(model => model.searchState, Model.StateCodes, " ")
<button type="submit" id="SearchButton">Search</button>
</div>
</div>
<div style="clear: both;"></div>
<强> CSS
#zipBox {
float: left;
padding-left: 20px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
vertical-align: top;
border:none;
}
#dateBox {
float: left;
padding-right: 10px;
padding-top: 20px;
border:none;
}
#stateBox {
float: left;
padding-right: 20px;
padding-top: 20px;
border:none;
}
#terrBox {
padding-top: 20px;
padding-left: 110px;
}
.boxMe
{
float: left;
border: 1px solid Silver;
padding: 3px;
}