Reputation: 719
I feel like this is something that should be an easy fix, but I'm stumped. I'd like to have each item in the list separated (inline) by a "list-block", but I can't get the blocks to show up using anything other than div tags, which automatically jump to a new line. I would just use HTML symbols (like below), but I want CSS customization. Thanks in advance!
Fiddle: http://jsfiddle.net/sos12/UwsFL/
CSS:
.list-block {
width: 1%;
height:0;
padding-bottom: 1%;
-moz-border-radius: 1%;
-webkit-border-radius: 1%;
border-radius: 1%;
background: black;
}
Tags:
<h2>
Apples
<i class="list-block"></i>
Pears
<div class="list-block"></div>
Peaches
<span class="list-block"></span>
Plums
<a class="list-block"></a>
Grapes
</h2>
HTML symbols:
<h2>
Apples
♦
Pears
♦
Peaches
♦
Plums
♦
Grapes
</h2>
Upvotes: 0
Views: 77
Reputation: 105903
For the list , usually use list-style-type http://jsfiddle.net/UwsFL/2/
li {
list-style-type:square;
font-size:2em;/* to show that squares follow font-size */
}
But inside a title, ul has no place :). Your approach with html entities is a good idea , then maybe you need to use word-spacing ? http://jsfiddle.net/UwsFL/3/
h2 {
text-align:center;
word-spacing:1em;
}
You can as well use pseudo element and style them :
http://jsfiddle.net/UwsFL/5/ (only in between)
h2 {
text-align:center;
}
h2 span {
display:inline-block;
}
h2 span:before {
content:'\29eb';
padding:0 0.5em;
}
h2 span:first-of-type:before {
content:'';
}
or all around : http://jsfiddle.net/UwsFL/6/
Hope these examples give you some idea:)
Upvotes: 0
Reputation: 25392
If you want the elements to be on the same line and have the attributes of a block element (such as a div), you have to use display: inline-block
. You can then use margin
to control the spacing between them.:
.list-block {
width: 1%;
height:0;
padding-bottom: 1%;
-moz-border-radius: 1%;
-webkit-border-radius: 1%;
border-radius: 1%;
background: black;
display: inline-block;
margin: 5px;
}
If you want to rotate the elements to make them diamonds, just use a transform (note that this is CSS3 and is not supported in really old browsers):
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
Upvotes: 2
Reputation: 324650
Add display:inline-block
.
This will allow you to make <div>
s show up on the same line, or allow you to give width (and height) to an otherwise inline element.
Upvotes: 0