Solved

Adding Pipe Delimeter  between buttons in css

Posted on 2016-11-09
4
34 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 9

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 55

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 55

Expert Comment

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

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Objects on Same Line 2 38
Zoom the page when you go in from your phone 3 61
How do I set diff properties in a table row? 3 27
Bootstrap 3 - Style a dropdown 1 11
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

839 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