How Can I Add A Border Or Line To The Right Of The Menuitem Which Are In Horizontal Alignment

Question

0.00/5 (No votes)

See more:

I have used asp:Menu and Asp:multiview to create the tabs .
It worked well but the tab items are look like a single line of sentence since they are horizontally aligned. eg: Tab1Tab2Tab3Tab4

I would like to modify this tab items to look like the following tabs
Tab1|Tab2|Tab3|Tab4

I beliee we can achieve this by css but i am not good at css and what i am getting in search people used buttons or list so they have properties to set it up .

Any help will be appreciated.

Posted 24-Nov-15 5:40am

BlackCanary

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Krunal Rohit · Answer 1 · 2015-11-24T05:50:00

Solution 1

Assuming you're using <li></li>] for tab header. Give each <li></li> tag css class .tab-header

CSS

li.tab-header{
    padding: 7px 15px;
    border-right: solid 1px #444;
}

li.tab-header:last-child
{
    border-left: none;
}

-KR

Posted 24-Nov-15 5:50am

Krunal Rohit

Updated 24-Nov-15 5:51am

v2

Comments

BlackCanary 23-Dec-15 15:03pm

I appreciate your effort in answering my question.
This is how my tabs are generated so I dont know to add css on it like the way you said.

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" OnMenuItemClick="Menu1_MenuItemClick">
<items>
<asp:MenuItem Text="Customers" Value="0" Selected="true">
<asp:MenuItem Text="Users" Value="1">
<asp:MenuItem Text="System" Value="2">

<asp:MultiView ID="multiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="Tab1" runat="server">

<asp:View ID="Tab1" runat="server">

<asp:View ID="Tab2" runat="server">

<asp:View ID="Tab3" runat="server">