Asp.net Ajax Control Toolkit - 同一行上的切换按钮答案

【问题标题】：Asp.net Ajax Control Toolkit - toggle button on same lineAsp.net Ajax Control Toolkit - 同一行上的切换按钮
【发布时间】：2013-05-07 01:21:09
【问题描述】：

我正在使用Ajax Control Toolkit 中的切换按钮。

在我的页面上，我想要以下布局（全部在一行上）：

切换按钮 |文本框 |按钮 |按钮 |切换按钮

问题

目前我有这个布局：

切换按钮 |文本框 |按钮 |按钮 |

切换按钮

切换按钮代码

<asp:CheckBox ID="CheckBoxToggleTips" runat="server" AutoPostBack="true" 
    OnCheckedChanged="CheckBoxToggleTips_CheckedChanged" />

<ajaxToolkit:ToggleButtonExtender ID="ToggleTips" runat="server"
    TargetControlID="CheckBoxToggleTips"
    ImageWidth="32"
    ImageHeight="32"
    CheckedImageAlternateText="Hide Tips"
    UncheckedImageAlternateText="Show Tips"
    UncheckedImageUrl="~/Images/lightbulboff.png"
    CheckedImageUrl="~/Images/lightbulbon.png" />

HTML 预期

<div class="title">
    <span id="mainContentPlaceHolder_LabelDepartment">A&amp;H</span>&nbsp;Risks<br>
    <div style="position: relative;">
        <a id="mainContentPlaceHolder_CheckBoxToggleTips_ToggleButton" href="" style="position: absolute;
            left: 0px; top: 0px; width: 32px; height: 32px; font-size: 32px;
            background-image:url(http://localhost:10833/Images/lightbulboff.png);
            background-repeat: no-repeat no-repeat;" title="Show Tips">
        </a>
    </div>
</div>

上面的样式属性是自动生成的。所以我的问题是如何使用我自己的样式而不是这个？或者如何编辑 left 和 top 值？

谢谢

【问题讨论】：

标签： c# asp.net html .net ajaxcontroltoolkit

【解决方案1】：

如果第二个 ToggleButton 与第一个具有相同的 css，则没有理由将其放在第二行。我建议使用 CssClass 属性并确保它使用与第一个 ToggleButton 相同的类。您很可能会用完宽度，因此将整个内容包含在外部 DIV 中并适当地设置宽度。希望这可以帮助。

【讨论】：

【解决方案2】：

看起来像是页面布局问题：检查是否缺少结束标记 </div> 希望这会有所帮助。

问候，亚历克斯

【讨论】：

【解决方案3】：

嘿，你可以像这样通过 CSS 解决。

#mainContentPlaceHolder_LabelDepartment{
margin:0;
padding: 2px;
width: 223px;
float:left;
height:450px;
    position: relative;
}

此示例代码您可以制作自己的代码来设置切换按钮的样式

希望对你有帮助。

【讨论】：