Html 将图表分区名称移动到外部条形图
编写HTML条形图。当前，分区/条形图的名称/标签显示在条形图内部。有没有一种方法可以让它们出现在它左端标记的栏外Html 将图表分区名称移动到外部条形图,html,css,Html,Css,编写HTML条形图。当前，分区/条形图的名称/标签显示在条形图内部。有没有一种方法可以让它们出现在它左端标记的栏外 <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; padding: 3px; margin: 1px; color: black; float: right; clear:bo
<!DOCTYPE html>
<style>
.chart div {
font: 10px Ubuntu;
background-color: white;
text-align: right;
padding: 3px;
margin: 1px;
color: black;
float: right;
clear:both;
}
</style>
<div class="chart">
<div style="width:0px;">Inwood 10</div>
<div style="width:3px;">Washington Heights 111</div>
<div style="width:7px;">Hamilton Heights 230</div>
<div style="width:10px;">Chinatown 314</div>
<div style="width:10px;">East Harlem 346</div>
<div style="width:16px;">Harlem 514</div>
<div style="width:18px;">Morningside Heights 590</div>
<div style="width:24px;">Battery Park 804</div>
<div style="width:25px;">Little Italy 814</div>
<div style="width:25px;">Yorkville 841</div>
<div style="width:33px;">North Sutton Area 1088</div>
<div style="width:37px;">Carnegie Hill 1228</div>
<div style="width:47px;">Tribeca 1544</div>
<div style="width:50px;">Central Park 1654</div>
<div style="width:51px;">Financial District 1684</div>
<div style="width:62px;">Lower East Side 2050</div>
<div style="width:64px;">Soho 2112</div>
<div style="width:71px;">West Village 2333</div>
<div style="width:89px;">Murray Hill 2932</div>
<div style="width:110px;">East Village 3642</div>
<div style="width:117px;">Clinton 3873</div>
<div style="width:137px;">Greenwich Village 4511</div>
<div style="width:140px;">Garment District 4614</div>
<div style="width:189px;">Chelsea 6225</div>
<div style="width:229px;">Gramercy 7568</div>
<div style="width:297px;">Upper West Side 9808</div>
<div style="width:428px;">Upper East Side 14113</div>
<div style="width:439px;">Midtown 14490</div>
</div>
.海图组{
字体：10px Ubuntu；
背景色：白色；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：黑色；
浮动：对；
明确：两者皆有；
}
因伍德10
华盛顿高地111
汉密尔顿高地230
唐人街314
东哈莱姆346
哈莱姆514
晨曦山庄590
炮台公园804
小意大利814
约克维尔841
北萨顿1088区
卡内基山1228
特里贝卡1544
中央公园1654
金融区1684
下东区2050
Soho 2112
西村2333
默里山2932
东村3642
克林顿3873
格林威治村4511
成衣区4614
切尔西6225
格雷梅西7568
上西区9808
上东区14113
市中心14490
您可以将文本放入另一个文本中，然后将其浮动到栏的左侧。这是我唯一的想法，但我也是一个新手。希望有帮助。我认为您无法将文本移到包含元素之外。您应该做的是为标签和条本身创建单独的元素（例如div）。bar div可以包含在标签的div中。类似于：
<div>
Label
<div style="width:123px"></div>
</div>
标签
.chart div{
字体：10px Ubuntu；
背景色：红色；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：黑色；
空白：nowrap；
位置：相对位置；
浮动：对；
明确：两者皆有；
}
.海图分区{
位置：绝对位置；
右：15px；
}
因伍德10
华盛顿高地111