Javascript 如何使用html5获取水平线中的图例
这是我的图例的代码,但是这些图例是垂直线,但我希望它是水平线,例如:图例颜色,后跟标题 html代码:Javascript 如何使用html5获取水平线中的图例,javascript,css,html,Javascript,Css,Html,这是我的图例的代码,但是这些图例是垂直线,但我希望它是水平线,例如:图例颜色,后跟标题 html代码: <div class='my-legend'> <div class='legend-scale'> <ul class='legend-labels'> <li><span style='background:#BEBADA;'>Three</span></li> <li>&
<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代码,我在这里给的图例对齐。任何帮助将不胜感激
你在找什么
html:
工作小提琴:
-
三
四
五
.我的传奇.传奇标题{
文本对齐:左对齐;
边缘底部:5px;
字体大小:粗体;
字体大小:90%;
}
.我的传奇.传奇比例ul{
保证金:0;
边缘底部:5px;
填充:0;
浮动:左;
列表样式:无;
}
.我的传奇.传奇规模ul li{
显示:内联;
字号:80%;
列表样式:无;
左边距:0;
线高:18px;
边缘底部:2px;
}
.my legend ul.legend-labels li.颜色{
显示:块;
浮动:左;
高度:16px;
宽度:20px;
右边距:5px;
左边距:0;
边框:1px实心#999;
}
.my legend ul.legend-labels li.legend{
显示:块;
浮动:左;
高度:16px;
宽度:40px;
右边距:5px;
左边距:0;
}
.我的传奇{
颜色:#777;
}
只是更改了HTML和CSS的一部分删除了
.my legend.legend scale ul li
中的内联样式,因为列表自然垂直形成。
.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;
}
<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>
.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;
}
<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;
}