0

我想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;
}
4

3 回答 3

1

我知道它不能直接回答你的问题，但你真的不应该使用表格来定位元素。表格应用于表格数据表示。这里可能应该使用 Divs。这是如何使用 div 实现我认为您想要的示例

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

>

http://jsfiddle.net/BeGBa/

于 2013-10-07T21:29:54.913 回答
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;
     }
于 2013-10-08T15:38:59.973 回答
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。

于 2013-10-07T21:15:57.200 回答