Переглянути джерело

un peu de css

pull/2/head
demisel 11 місяці тому
джерело
коміт
b31f6481e5
2 змінених файлів з 42 додано та 20 видалено
  1. 29
    9
      css/style.css
  2. 13
    11
      index.html

+ 29
- 9
css/style.css Переглянути файл

@@ -3,19 +3,39 @@ body {
3 3
 	margin: 0;
4 4
 }
5 5
 
6
-menu {
7
-	padding: 0;
8
-	margin: 5px;
6
+.menuitem label::after {
7
+	content: " :";
9 8
 }
10 9
 
11
-menuitem {
12
-	margin-right: 10px;
10
+.menuitem input {
11
+	max-width: 50px;
13 12
 }
14 13
 
15
-menuitem label::after {
16
-	content: " :";
14
+.row {
15
+	display: flex;
16
+	flex-direction: row;
17 17
 }
18 18
 
19
-menuitem input {
20
-	max-width: 50px;
19
+.w-max {
20
+	width: max-content;
21
+}
22
+
23
+.justify-evenly {
24
+	justify-content: space-evenly;
25
+}
26
+
27
+.justify-center {
28
+	justify-content: center;
29
+}
30
+
31
+.border {
32
+	border: 1px solid black;
33
+}
34
+
35
+.p-2 {
36
+	padding: 0.5rem;
37
+}
38
+
39
+.m-2 {
40
+	margin: 0.5rem;
21 41
 }

+ 13
- 11
index.html Переглянути файл

@@ -15,26 +15,28 @@
15 15
 </head>
16 16
 
17 17
 <body>
18
-	<menu>
19
-		<menuitem>
18
+	<div class="row w-full justify-evenly border p-2 m-2">
19
+		<span class="menuitem">
20 20
 			<label>Tubes Number</label>
21 21
 			<input type="number" size="5" id="tbNumber" value="10">
22
-		</menuitem>
23
-		<menuitem>
22
+		</span>
23
+		<span class="menuitem">
24 24
 			<label>Tubes Levels</label>
25 25
 			<input type="number" size="5" id="tbLevel" value="6">
26
-		</menuitem>
27
-		<menuitem>
26
+		</span>
27
+		<span class="menuitem">
28 28
 			<label>Padding</label>
29 29
 			<input type="number" size="5" id="padding" value="10">
30
-		</menuitem>
31
-		<menuitem>
30
+		</span>
31
+		<span class="menuitem">
32 32
 			<label>Tube Size</label>
33 33
 			<input type="number" size="5" id="tbSize" value="50">
34
-		</menuitem>
34
+		</span>
35 35
 		<button type="button" onclick="newGame()">New game</button>
36
-	</menu>
37
-	<main oncontextmenu="return false;">
36
+	</div>
37
+	<div class="row justify-center">
38
+		<main oncontextmenu="return false;">
39
+	</div>
38 40
 	</main>
39 41
 </body>
40 42
 

Завантаження…
Відмінити
Зберегти