Asp.net Ajax Control Toolkit-同一行上的切換按鈕

Question

我正在使用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>

上面的style屬性是自動生成的。 所以我的問題是我該如何使用自己的樣式呢？ 或者如何編輯left和top值？

謝謝

Answer 1

如果第二個ToggleButton具有與第一個相同的CSS，則沒有理由為什么第二個ToggleButton應該位於第二行。 我建議使用CssClass屬性，並確保它使用與第一個ToggleButton相同的類。 您很可能會用完寬度，因此請將整個內容包含在外部DIV中並適當設置寬度。 希望這可以幫助。

Answer 2

看起來是頁面布局問題：檢查缺少的結束標記</div>希望這會有所幫助。

問候，亞歷克斯

Answer 3

嘿，您可以像這樣通過CSS解析。

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

您可以通過此示例代碼制作自己的代碼來設置切換按鈕的樣式

希望對您有幫助。