سؤال

<tr>
    <td align="right">
        <div style="background-image: url(image/menustript.bmp); border-right: #ffffff 2px outset; border-top: #ffffff 2px outset; border-left: #ffffff 2px outset; border-bottom: #ffffff 2px outset;">
            <asp:ImageButton ID="ibtn_home" runat="server"  ImageUrl="~/image/homebutton.jpg" ImageAlign="Middle" OnClick="ibtn_home_Click" Height="21px"/>
            <asp:ImageButton ID="ibtn_teacher"  runat="server"  ImageUrl="~/image/teacher.png" ImageAlign="Middle" width="90" OnClick="ibtn_teacher_Click"/>
            <asp:ImageButton ID="ibtn_student"  runat="server"   ImageUrl="~/image/student.bmp" ImageAlign="Middle" OnClick="ibtn_student_Click" Height="21px"/>
            <asp:ImageButton ID="ibtn_result" runat="server"  ImageUrl="~/image/result.JPG" ImageAlign="Middle" OnClick="ibtn_result_Click" Height="21px"/>
            <asp:ImageButton ID="ibtn_logoff" runat="server"  ImageUrl="~/image/logout.bmp" ImageAlign="Middle" OnClick="ibtn_logoff_Click" height="21px"/>
        </div>
    </td>
</tr>

تريد تعيين مثل أدناه

home | teacher | student | result |                                     logout

ولكن، عندما يكون المشرف تسجيل الدخول جميع القائمة يجب أن تكون مثل أعلاه ..

ولكن عند الطالب أو حتى في الصفحة الرئيسية. يجب أن تكون القائمة مثل

home | student | result

وعند تسجيل دخول المعلم ثم يكون قائمة Shoulb، أدناه

home | student | result |                                               logout

يمكن لأي شخص أن يساعدني .. لتعيين القائمة مع CSS أو بدون CSS .. لكن أعطني أي شيء تم تعيينه من القائمة مثل هذا.

هل كانت مفيدة؟

المحلول

جرب هذا:

<style type="text/css">
    .menuRow
    {
        background-image: url(image/menustript.bmp); 
        border-right: #ffffff 2px outset;
        border-top: #ffffff 2px outset; 
        border-left: #ffffff 2px outset; 
        border-bottom: #ffffff 2px outset;
    }
    .leftItem
    {
        float: left; display: block; padding-left: 5px; padding-right: 5px;
    }
</style>
<table>
    <tr class="menuRow">
        <td align="left">
                <asp:imagebutton id="ibtn_home" runat="server" imageurl="~/image/homebutton.jpg"
                    imagealign="Middle" onclick="ibtn_home_Click" height="21px" class="leftItem" />
                <asp:imagebutton id="ibtn_teacher" runat="server" imageurl="~/image/teacher.png"
                    imagealign="Middle" width="90" onclick="ibtn_teacher_Click" class="leftItem"/>
                <asp:imagebutton id="ibtn_student" runat="server" imageurl="~/image/student.bmp"
                    imagealign="Middle" onclick="ibtn_student_Click" height="21px" class="leftItem"/>
                <asp:imagebutton id="ibtn_result" runat="server" imageurl="~/image/result.JPG" imagealign="Middle"
                    onclick="ibtn_result_Click" height="21px" class="leftItem"/>
        </td>
        <td align="right">
            <asp:imagebutton id="ibtn_logoff" runat="server" imageurl="~/image/logout.bmp" imagealign="Middle"
                    onclick="ibtn_logoff_Click" height="21px" />
        </td>
    </tr>
</table>

نصائح أخرى

هذا ليس مثاليا حقا، لكنك تحتاج إلى إضافة إلى زر صورتك CSSClass الخاص بك.

ثم اضبط النمط التالي على الفصل المحدد:

float: left; display: block; padding-left: 5px; padding-right: 5px;
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top