删除插入字段左侧的间隙以及两个按钮之间的间隙？

Question

<asp:DetailsView ID="dtl_people" runat="server" AutoGenerateRows="False" DataKeyNames="personID" DataSourceID="dsrc_peopleObject" DefaultMode="Insert" CssClass="table-bordered table-striped" ControlStyle-Width="50%" ControlStyle-Height="200px" OnPageIndexChanging="dtl_people_PageIndexChanging" RowStyle-Wrap="False"> <FieldHeaderStyle Width="15%" /> <Fields> <asp:BoundField DataField="personID" HeaderText="personID" InsertVisible="False" ReadOnly="True" SortExpression="personID" /> <asp:BoundField DataField="lastName" HeaderText="lastName" SortExpression="lastName" ControlStyle-Width="100%"> </asp:BoundField> <asp:BoundField DataField="firstName" HeaderText="firstName" SortExpression="firstName" /> <asp:BoundField DataField="address" HeaderText="address" SortExpression="address" /> <asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" ItemStyle-Width="350px"> <ItemStyle Width="350px"></ItemStyle> </asp:BoundField> <asp:CommandField ShowInsertButton="True" ButtonType="Button" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="False" /> </Fields> <InsertRowStyle Wrap="true"/> </asp:DetailsView>

我想删除按钮之间的间隙以及输入详细信息的字段左侧的间隙，谢谢

Answer 1

ASP.NET DetailsView控件的dafult行为是以表格形式显示数据， 未应用填充 。这意味着您有一个CSS样式规则导致这种不受欢迎的行为。

幸运的是，这很容易找到：

1. 在Google Chrome中运行您的网络应用程序。
2. 按Ctrl + Shift + I打开开发者控制台。
3. 单击“元素”选项卡。
4. 右键点击页面中发生间距问题的元素，然后点击检查
5. 仔细查看开发者控制台中的样式部分，了解导致不良影响的样式规则，并在样式表文件中进行必要的更改以将其删除。

示例：