Solved

Adding Pipe Delimeter  between buttons in css

Posted on 2016-11-09
4
26 Views
Last Modified: 2016-11-14
How to adding Pipe Delimeter  between buttons in css
0
Comment
Question by:Member_2_7967608
  • 2
4 Comments
 
LVL 8

Assisted Solution

by:Paweł
Paweł earned 250 total points
ID: 41880390
you could but the buttons in spans
give the span a padding
and then give them a left border or right border

or you could use css glyphs
https://css-tricks.com/snippets/html/glyphs/
| for |

check this out for example
http://codepen.io/chooch/pen/YpyQPv

or you could just use the | character between the buttons there's a bunch of ways to skin this cat.

<div>
  <button>my button</button>
  <span>|</span>
  <button>my button</button>
  <span>|</span>
  <button>my button</button>
  <span>|</span>
  <button>my button</button>
  <span>|</span>
  <button>my button</button>

</div>

Open in new window

0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41880690
There are two ways of doing this.
1. Using borders
2. Using :after and content: "|"
CSS
.piped span {
  border-left: 1px solid #ccc;
  padding: 0 10px;
}
.piped span:first-child {
  border-left: none;
  padding-left: 0;
}
.text-piped span:after {
  content: "|";
  margin: 0 10px;
}
.text-piped span:last-child:after {
  content: '';
  margin: 0 10px;
}

Open in new window

HTML
  <div class="piped">
    <span>One</span> <span>Two</span> <span>Three</span>
  </div>
  <div class="text-piped">
    <span>One</span> <span>Two</span> <span>Three</span>
  </div>

Open in new window

Working sample here
0
 

Author Closing Comment

by:Member_2_7967608
ID: 41886254
Thanks for the quick solution
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41886315
You are welcome.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now