fix column

This commit is contained in:
yuyuki
2018-10-10 20:22:36 +02:00
parent 4537cf2500
commit 1d7a416f88
2 changed files with 84 additions and 64 deletions
+14 -6
View File
@@ -3,6 +3,7 @@
.charsheet {
width: 859px;
background: url(https://i.imgur.com/VMGQkox.png);
font-size: 0.9rem;
}
.row {
@@ -13,7 +14,17 @@
.columnFlex {
flex-grow: 1;
margin: 0 1mm;
margin: 1px;
}
.columnFlex>label {
width: 250px;
display: inline-block;
}
.flex-left {
text-align: right;
margin-right: 0;
}
.column-header {
@@ -25,12 +36,9 @@
/***** Text *******/
input[type='text'] {
width: 30mm;
}
input[type='number'] {
width: 10mm;
width: 30px;
text-align: right;
}
.mf {
+70 -58
View File
@@ -90,13 +90,15 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_Technique" value="0">Techniques</span>
</div>
<input type="number" name="attr_Technique" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Technique" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span>Acrobaties</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Acrobatie">
<input type="number" name="attr_Acrobatie_max" readonly>
</div>
@@ -105,7 +107,7 @@
<div class="columnFlex">
<span class="mf">Armes de poings</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_ArmesDePoing">
<input type="number" name="attr_ArmesDePoing_max" readonly>
</div>
@@ -114,7 +116,7 @@
<div class="columnFlex">
<span class="mf">Armes d'épaule</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_ArmesDEpaule">
<input type="number" name="attr_ArmesDEpaule_max" readonly>
</div>
@@ -123,7 +125,7 @@
<div class="columnFlex">
<span class="mf">[Armes embarquée]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_ArmesEmbarquee">
<input type="number" name="attr_ArmesEmbarquee_max" readonly>
</div>
@@ -132,7 +134,7 @@
<div class="columnFlex">
<span>Artisanat (<input type="text" name="attr_ArtisanatLabel">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Artisanat">
<input type="number" name="attr_Artisanat_max" readonly>
</div>
@@ -141,7 +143,7 @@
<div class="columnFlex">
<span class="mf">[Pilotage (<input type="text" name="attr_Pilotage1Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Pilotage1">
<input type="number" name="attr_Pilotage1_max" readonly>
</div>
@@ -150,7 +152,7 @@
<div class="columnFlex">
<span class="mf">[Pilotage (<input type="text" name="attr_Pilotage2Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Pilotage2">
<input type="number" name="attr_Pilotage2_max" readonly>
</div>
@@ -159,7 +161,7 @@
<div class="columnFlex">
<span>Technologie</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Technologie">
<input type="number" name="attr_Technologie_max" readonly>
</div>
@@ -173,14 +175,16 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_survie" value="0">Survie</span>
</div>
<input type="number" name="attr_Survie" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Survie" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span class="mf">Armes de jet</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_ArmesdeJet">
<input type="number" name="attr_ArmesdeJet_max" readonly>
</div>
@@ -189,7 +193,7 @@
<div class="columnFlex">
<span class="mf">[Armes lourdes]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_ArmesLourdes">
<input type="number" name="attr_ArmesLourdes_max" readonly>
</div>
@@ -198,7 +202,7 @@
<div class="columnFlex">
<span>Athlétisme</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Athletisme">
<input type="number" name="attr_Athletisme_max" readonly>
</div>
@@ -207,7 +211,7 @@
<div class="columnFlex">
<span>Équitation</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Equitation">
<input type="number" name="attr_Equitation_max" readonly>
</div>
@@ -216,7 +220,7 @@
<div class="columnFlex">
<span class="mf">Mêlée</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Melee">
<input type="number" name="attr_Melee_max" readonly>
</div>
@@ -225,7 +229,7 @@
<div class="columnFlex">
<span>Environement (<input type="text" name="attr_Environement1Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Environement1">
<input type="number" name="attr_Environement1_max" readonly>
</div>
@@ -234,7 +238,7 @@
<div class="columnFlex">
<span>Environement (<input type="text" name="attr_Environement2Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Environement2">
<input type="number" name="attr_Environement2_max" readonly>
</div>
@@ -243,7 +247,7 @@
<div class="columnFlex">
<span>Environement (<input type="text" name="attr_Environement3Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Environement3">
<input type="number" name="attr_Environement3_max" readonly>
</div>
@@ -256,14 +260,16 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_espionnage" value="0">Espionnage</span>
</div>
<input type="number" name="attr_Espionnage" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Espionnage" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span>Déguisement</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Deguisement">
<input type="number" name="attr_Deguisement_max" readonly>
</div>
@@ -273,7 +279,7 @@
<div class="columnFlex">
<span>Discrétion</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Discretion">
<input type="number" name="attr_Discretion_max" readonly>
</div>
@@ -283,7 +289,7 @@
<div class="columnFlex">
<span>Empathie</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Empathie">
<input type="number" name="attr_Empathie_max" readonly>
</div>
@@ -293,7 +299,7 @@
<div class="columnFlex">
<span>[Falsification]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Falsification">
<input type="number" name="attr_Falsification_max" readonly>
</div>
@@ -313,7 +319,7 @@
<div class="columnFlex">
<span>[Senseurs]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Senseurs">
<input type="number" name="attr_Senseurs_max" readonly>
</div>
@@ -323,7 +329,7 @@
<div class="columnFlex">
<span>[Sys. Sécu]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_SysSecu">
<input type="number" name="attr_SysSecu_max" readonly>
</div>
@@ -333,7 +339,7 @@
<div class="columnFlex">
<span>Vigilance</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Vigilance">
<input type="number" name="attr_Vigilance_max" readonly>
</div>
@@ -349,14 +355,16 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_Science" value="0">Science</span>
</div>
<input type="number" name="attr_Science" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Science" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span>Analyse</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Analyse">
<input type="number" name="attr_Analyse_max" readonly>
</div>
@@ -366,7 +374,7 @@
<div class="columnFlex">
<span>Arts(<input type="text" name="attr_ArtsLabel">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Art">
<input type="number" name="attr_Art_max" readonly>
</div>
@@ -376,7 +384,7 @@
<div class="columnFlex">
<span>Connaissance (<input type="text" name="attr_Connaissance1Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Connaissance1">
<input type="number" name="attr_Connaissance1_max" readonly>
</div>
@@ -386,7 +394,7 @@
<div class="columnFlex">
<span>Connaissance (<input type="text" name="attr_Connaissance2Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Connaissance2">
<input type="number" name="attr_Connaissance2_max" readonly>
</div>
@@ -396,7 +404,7 @@
<div class="columnFlex">
<span>Connaissance (<input type="text" name="attr_Connaissance3Label">)</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Connaissance3">
<input type="number" name="attr_Connaissance3_max" readonly>
</div>
@@ -406,7 +414,7 @@
<div class="columnFlex">
<span>[Ésotérisme]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Esoterisme">
<input type="number" name="attr_Esoterisme_max" readonly>
</div>
@@ -416,7 +424,7 @@
<div class="columnFlex">
<span>Histoire</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Histoire">
<input type="number" name="attr_Histoire_max" readonly>
</div>
@@ -426,7 +434,7 @@
<div class="columnFlex">
<span>[Ingénierie]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Ingenierie">
<input type="number" name="attr_Ingenierie_max" readonly>
</div>
@@ -436,7 +444,7 @@
<div class="columnFlex">
<span>[Médecine]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Medecine">
<input type="number" name="attr_Medecine_max" readonly>
</div>
@@ -446,7 +454,7 @@
<div class="columnFlex">
<span>Navigation</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Navigation">
<input type="number" name="attr_Navigation_max" readonly>
</div>
@@ -456,7 +464,7 @@
<div class="columnFlex">
<span>[Sciences Solaires]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_SciencesSolaires">
<input type="number" name="attr_SciencesSolaires_max" readonly>
</div>
@@ -466,7 +474,7 @@
<div class="columnFlex">
<span>[Sciences Stellaires]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_SciencesStellaires">
<input type="number" name="attr_SciencesStellaires_max" readonly>
</div>
@@ -480,14 +488,16 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_Negociation" value="0">Negociation</span>
</div>
<input type="number" name="attr_Negociation" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Negociation" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span>Baration</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Baration">
<input type="number" name="attr_Baration_max" readonly>
</div>
@@ -497,7 +507,7 @@
<div class="columnFlex">
<span>Bureaucratie</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Bureaucratie">
<input type="number" name="attr_Bureaucratie_max" readonly>
</div>
@@ -507,7 +517,7 @@
<div class="columnFlex">
<span>Comédie</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Comedie">
<input type="number" name="attr_Comedie_max" readonly>
</div>
@@ -517,7 +527,7 @@
<div class="columnFlex">
<span>Commerce</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Commerce">
<input type="number" name="attr_Commerce_max" readonly>
</div>
@@ -527,7 +537,7 @@
<div class="columnFlex">
<span>Danse</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Danse">
<input type="number" name="attr_Danse_max" readonly>
</div>
@@ -537,7 +547,7 @@
<div class="columnFlex">
<span>Éloquence</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Eloquence">
<input type="number" name="attr_Eloquence_max" readonly>
</div>
@@ -547,7 +557,7 @@
<div class="columnFlex">
<span>Étiquette</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Etiquette">
<input type="number" name="attr_Etiquette_max" readonly>
</div>
@@ -557,7 +567,7 @@
<div class="columnFlex">
<span>Jeux</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Jeux">
<input type="number" name="attr_Jeux_max" readonly>
</div>
@@ -567,7 +577,7 @@
<div class="columnFlex">
<span class="mf">Séduction</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Seduction">
<input type="number" name="attr_Seduction_max" readonly>
</div>
@@ -581,14 +591,16 @@
<div class="columnFlex">
<span><input type="checkbox" name="attr_predilection_Trempe" value="0">Trempe</span>
</div>
<input type="number" name="attr_Trempe" value="0">
<div class="columnFlex flex-left">
<input type="number" name="attr_Trempe" value="0">
</div>
</div>
<div class="row">
<div class="columnFlex">
<span>Commandement</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Commandement">
<input type="number" name="attr_Commandement_max" readonly>
</div>
@@ -598,7 +610,7 @@
<div class="columnFlex">
<span class="mf">[Démolition]</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Demolition">
<input type="number" name="attr_Demolition_max" readonly>
</div>
@@ -608,7 +620,7 @@
<div class="columnFlex">
<span class="mf">Détermination</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Determination">
<input type="number" name="attr_Determination_max" readonly>
</div>
@@ -618,7 +630,7 @@
<div class="columnFlex">
<span>Dressage</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Dressage">
<input type="number" name="attr_Dressage_max" readonly>
</div>
@@ -628,7 +640,7 @@
<div class="columnFlex">
<span>Illégalités</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Illegalites">
<input type="number" name="attr_Illegalites_max" readonly>
</div>
@@ -638,7 +650,7 @@
<div class="columnFlex">
<span class="mf">Intimidation</span>
</div>
<div class="g">
<div class="columnFlex flex-left g">
<input type="number" name="attr_Intimidation">
<input type="number" name="attr_Intimidation_max" readonly>
</div>
@@ -648,7 +660,7 @@
<div class="columnFlex">
<span>Premiers soins</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Premierssoins">
<input type="number" name="attr_Premierssoins_max" readonly>
</div>
@@ -658,7 +670,7 @@
<div class="columnFlex">
<span>Tactique</span>
</div>
<div>
<div class="columnFlex flex-left">
<input type="number" name="attr_Tactique">
<input type="number" name="attr_Tactique_max" readonly>
</div>