Solved

Adding Pipe Delimeter  between buttons in css

Posted on 2016-11-09
4
15 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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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
Comment Utility
Thanks for the quick solution
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

743 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

8 Experts available now in Live!

Get 1:1 Help Now