Question

我有以下弹出窗口，它反映了列表框和表格中的其他一些对象。第一行有三列我放了两个不同的列表框，我的问题是它们没有对齐到左边。第一个和第二个列表框之间有一些空格。

$

@{  Html.Telerik().Window()
    .Name("Window")
    .Title("Select Product")
    .Content(@<text>
        @using (Html.BeginForm())
        {                                                
            <table style="width:100%">
                    <tr>
                        <td style="width:250px">
                            <div>
                              <h4>Categories: </h4> 
                            </div>
                            <div>
                                @Html.ListBox("lstCat", new SelectList(new[] {""}), new {@style = "width: 250px;height:300px"})
                            </div>

                        </td>
                        <td  style="width:250px">    
                            <div>
                                <h4>Sub-Categories:</h4>
                            </div>
                            <div>
                                @Html.ListBox("lstSubCat", new SelectList(new[] {""}), new {@style = "width: 250px;height:300px"})
                            </div>
                        </td>
                        <td  style="width:400px;vertical-align:top">
                            <div>
                                <h4>Products:</h4>
                            </div>
                            <div>
                                @*@Html.ListBox("lstProducts", new SelectList(new[] {""}), new {@style = "width: 400px;height:300px"})*@

                                @(Html.Telerik().Grid<CS_Product>()        
                                .Name("product-grid")
                                .Scrollable(c => c.Height("120px"))                        
                                .Columns(columns =>
                                {
                                    columns.Bound(o => o.ID).Hidden(true);                                        
                                    columns.Bound(o => o.Name).Width(200);
                                    columns.Bound(o => o.Sku).Width(200);
                                    columns.Bound(o => o.Price).Width(60);
                                    columns.Command(commands =>
                                        commands.Custom("AddProduct")
                                        .Text("Add")
                                        .DataRouteValues(route => route.Add(o => o.ID).RouteKey("productid"))
                                        .Ajax(true)
                                        .Action("AddProduct", "DirectOrder")).Width(100); 
                                })                                                

                                )

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                             <h4>Shopping Bag:</h4>(double click to remove product)
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">                                

                            @(Html.Telerik().Grid<CS_ShoppingCartItem>()        
                                .Name("shoppingbag-grid")
                                .Scrollable(c => c.Height("120px"))                        
                                .Columns(columns =>
                                {
                                    columns.Bound(o => o.ID).Hidden(true);
                                    columns.Bound(o => o.Sku).Width(100);
                                    columns.Bound(o => o.Name).Width(200);
                                    columns.Bound(o => o.Quantity).Width(60);
                                    columns.Bound(o => o.Price).Width(60);
                                    columns.Bound(o => o.Discount).Width(60);
                                    columns.Bound(o => o.PriceAfterDiscount).Width(90);                                         
                                    columns.Command(commands =>
                                        commands.Custom("DeleteProduct")
                                        .Text("Delete")
                                        .DataRouteValues(route => route.Add(o => o.ID).RouteKey("productid"))
                                        .Ajax(true)
                                        .Action("DeleteProduct", "DirectOrder")).Width(100); 
                                })                                                

                                )

                        </td>
                    </tr>
                    <tr>
                        <td colspan="1">
                            <table>
                                <tr>
                                    <td>
                                        <h4>  Sub-Total: </h4>
                                    </td>
                                    <td>
                                        <label id="lblWTotal"/>  
                                    </td>
                                </tr>
                            </table>                               
                        </td>
                    </tr>
                </table>
        }
        </text>)        
    .Height(600)
    .Draggable(true)
    .Modal(true)
    .Visible(false)
    .Render();

}

Answer 1

将align='left'放入<td>，因为单元格的默认对齐方式是中心。

<td style="width:250px" align='left'>

列表框左对齐表格列内

1 个答案: