Solved

Adding Pipe Delimeter  between buttons in css

Posted on 2016-11-09
4
39 Views
Last Modified: 2016-11-14
How to adding Pipe Delimeter  between buttons in css
0
Comment
Question by:Member_2_7967608
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 57

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 57

Expert Comment

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

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I make my tabs look like this? 1 49
Top Aligning Inner Divs 5 33
How to get chosen background-color on every line? 10 44
Make Float not to Wrap 15 65
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

739 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