Reputation: 79
this the code for my legend but these legends are coming in vertical line but i want it to be in horizontal line eg: legend color follwed by title.
html code:
<div class='my-legend'>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#BEBADA;'>Three</span></li>
<li></li>
<li><span style='background:#FB8072;'></span></li>
<li>Four</li>
<li><span style='background:#80B1D3;'></span></li>
<li>Five</li>
</ul>
</div>
</div>
Css code:
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
display: inline;
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 20px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend a {
color: #777;
}
this is my css code where i am giving the alignment of the legends.any help would be appreciated.
Upvotes: 2
Views: 2964
Reputation: 400
Working fiddle: http://jsfiddle.net/jw2Sd/20/
<div class='my-legend'>
<div class='legend-scale'>
<ul class='legend-labels'>
<li>
<span class="color" style='background:#BEBADA;'></span>
<span class="legend">Three</span>
<span class="color" style='background:#FB8072;'></span>
<span class="legend">Four</span>
<span class="color" style='background:#80B1D3;'></span>
<span class="legend">Five</span>
</li>
</ul>
</div>
</div>
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
display:inline;
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.my-legend ul.legend-labels li .color {
display: block;
float: left;
height: 16px;
width: 20px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend ul.legend-labels li .legend {
display: block;
float: left;
height: 16px;
width: 40px;
margin-right: 5px;
margin-left: 0;
}
.my-legend a {
color: #777;
}
Just changed the HTML and bit of CSS
Upvotes: 2
Reputation: 1769
Is this what you are looking for?
html:
<li><span style='background:#BEBADA;'></span></li>
<li>Three</li>
<li><span style='background:#FB8072;'></span></li>
<li>Four</li>
<li><span style='background:#80B1D3;'></span></li>
<li>Five</li>
css:
.my-legend .legend-scale ul li {
display: inline-block;
font-size: 80%;
list-style: none;
line-height: 18px;
vertical-align: text-top;
}
.my-legend ul.legend-labels li span {
display: inline-block;
height: 16px;
width: 20px;
margin-right: 5px;
margin-left: 10px;
border: 1px solid #999;
}
Upvotes: 3