c# - 使用 CSS 将用户控件的编辑按钮移动到另一个 td

Question

我有一个使用 <table> 设计的用户控件对于这个用户界面。

现在我想将“编辑”按钮从用户控件移动到与下拉列表相同的行，如下所示。

是否可以使用 CSS 像这样移动/重新定位，或者我们是否需要为这个简单的事情编辑用户控件的设计。我真的不想编辑用户控件的设计，但不确定仅使用 CSS 是否可行。请分享您的专家意见。这是我的用户控制标记

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <table>
        <tr>
            <td>
                <asp:Label runat="server" Text="*" ForeColor="Red" ID="reqLabel" EnableTheming="false"></asp:Label>
            </td>
            <td>
                <asp:Label ID="domainameLabel" runat="server" Text="" Width="130"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="DomainValueDropDownList" runat="server" onchange="OnDomainValueChange(this)"
                    AutoPostBack="true" OnSelectedIndexChanged="DomainValueDropDownList_SelectedIndexChanged" Width="200px">
                </asp:DropDownList>
            </td>
             <td>
                <asp:Label runat="server" ID="lblNewMessage" Text="New value. Please approve." EnableTheming="false" ForeColor="Red" Visible="false"></asp:Label>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Input is required."
                ControlToValidate="DomainValueDropDownList" ForeColor="Red">!</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <div id="NewDomainValueDiv" runat="server" visible="false">
                <td>
                </td>
                <td>
                </td>
                <td>
                    <asp:TextBox ID="newDomainValueTextBox" runat="server" ToolTip="Click the Add button to add this new value"></asp:TextBox>
                </td>
                <td>
                    <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" CausesValidation="False" ToolTip="Click button to add this new value" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click"
                        CausesValidation="False" />
                    <asp:Label ID="infoLbl" runat="server" ForeColor="Red" Text="**New Project will be added to selected Platform. Please select the appropriate platform**" Visible="false"></asp:Label>
                </td>
            </div>
        </tr>
        <tr>
            <div id="UpdateDomainValueDiv" runat="server">
                <td>
                </td>
                <td>
                    <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="btnEdit_Click" CausesValidation="False" />
                </td>
            </div>
        </tr>
    </table>
</ContentTemplate>

我呈现的 HTML 页面部分

<table>
        <tbody><tr>
            <td>
                <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_reqLabel" style="color:Red;">*</span>
            </td>
            <td>
                <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_domainameLabel" style="display:inline-block;color:Black;font-family:Arial;font-size:9pt;font-weight:normal;width:130px;">Project Name</span>
            </td>
            <td>
                <select name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList" onchange="OnDomainValueChange(this);setTimeout('__doPostBack(\'ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList\',\'\')', 0)" id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_DomainValueDropDownList" class="dropdownlist" style="font-family:Arial;font-size:9pt;font-weight:normal;width:200px;">
                                        <option value=""></option>

                                    </select>
            </td>
            <td>

                <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_RequiredFieldValidator1" style="color:Red;visibility:hidden;">!</span>
            </td>
        </tr>
        <tr>

        </tr>
        <tr>
            <td>
                </td>
                <td>
                    <input type="submit" name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$btnEdit" value="Edit" id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_btnEdit" class="ui-widget ui-state-default ui-corner-all ui-button-text-only">
                </td>

        </tr>
        <tr>
            <td colspan="3">

            </td>
        </tr>
    </tbody></table>

还有来自开发者工具的 CSS 样式

    table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from 
user agent stylesheettable {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
Inherited from 
Style Attribute {
    font-family: Arial;
    font-size: 9pt;
    width: 100%;
}
Inherited from 
Style Attribute {
    visibility: visible;
}
Inherited from 
.ajax__tab_xp .ajax__tab_body {
    font-family: verdana,tahoma,helvetica;
    font-size: 10pt;
    border: 1px solid #999999;
    border-top: 0;
    padding: 8px;
    background-color: #ffffff;
}
Inherited from 
Style Attribute {
    visibility: visible;
}
Inherited from 
Style Attribute {
    font-family: Arial;
    font-size: 9pt;
    width: 100%;
}
Inherited from 
body {
    background: #FFFFFF;
    font-size: .80em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

JSfiddle Demo

Answer 1

CSS 解决方案

将 tr 显示值更改为 inline-block(适用于所有浏览器，inline 除外)。默认为 table-row，这使得每一行都占 100% 的宽度。

这是一个纯粹的 hack，不应该对任何比这种形式更大的东西进行实践。为了不影响其他表行，给这个表一个类，并用 .class-name 作为目标tr

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  font-family: Arial;
  font-size: 9pt;
  width: 100%;
  visibility: visible;
  font-family: verdana, tahoma, helvetica;
  font-size: 10pt;
  border: 1px solid #999999;
  border-top: 0;
  padding: 8px;
  background-color: #ffffff;
  visibility: visible;
  font-family: Arial;
  font-size: 9pt;
  width: 100%;
  background: #FFFFFF;
  font-size: .80em;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  color: #696969;
}
tr {
  display: inline-block;
}

<table>
  <tbody>
    <tr>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_reqLabel" style="color:Red;">*</span>

      </td>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_domainameLabel" style="display:inline-block;color:Black;font-family:Arial;font-size:9pt;font-weight:normal;width:130px;">Project Name</span>

      </td>
      <td>
        <select name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList" onchange="OnDomainValueChange(this);setTimeout('__doPostBack(\'ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList\',\'\')', 0)"
        id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_DomainValueDropDownList" class="dropdownlist" style="font-family:Arial;font-size:9pt;font-weight:normal;width:200px;">
          <option value=""></option>
        </select>
      </td>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_RequiredFieldValidator1" style="color:Red;visibility:hidden;">!</span>

      </td>
    </tr>
    <tr></tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$btnEdit" value="Edit" id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_btnEdit" class="ui-widget ui-state-default ui-corner-all ui-button-text-only">
      </td>
    </tr>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>

HTML 解决方案

这是重组标记的标准解决方案。将 td block 移动到第一个 tr 中。

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
  font-family: Arial;
  font-size: 9pt;
  width: 100%;
  visibility: visible;
  font-family: verdana, tahoma, helvetica;
  font-size: 10pt;
  border: 1px solid #999999;
  border-top: 0;
  padding: 8px;
  background-color: #ffffff;
  visibility: visible;
  font-family: Arial;
  font-size: 9pt;
  width: 100%;
  background: #FFFFFF;
  font-size: .80em;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  color: #696969;
}

<table>
  <tbody>
    <tr>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_reqLabel" style="color:Red;">*</span>

      </td>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_domainameLabel" style="display:inline-block;color:Black;font-family:Arial;font-size:9pt;font-weight:normal;width:130px;">Project Name</span>

      </td>
      <td>
        <select name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList" onchange="OnDomainValueChange(this);setTimeout('__doPostBack(\'ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$DomainValueDropDownList\',\'\')', 0)"
        id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_DomainValueDropDownList" class="dropdownlist" style="font-family:Arial;font-size:9pt;font-weight:normal;width:200px;">
          <option value=""></option>
        </select>
      </td>
      <td> <span id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_RequiredFieldValidator1" style="color:Red;visibility:hidden;">!</span>

      </td>
      <td>
        <input type="submit" name="ctl00$MainContent$TabContainer1$TabPanel2$GeneralInformationControl$Project_Name$btnEdit" value="Edit" id="MainContent_TabContainer1_TabPanel2_GeneralInformationControl_Project_Name_btnEdit" class="ui-widget ui-state-default ui-corner-all ui-button-text-only">
      </td>
    </tr>
    <tr></tr>
    <tr>
      <td></td>

    </tr>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tbody>
</table>