Skip to content

Commit 87155e3

Browse files
CoreSheepCoreSheep
committed
Fix image display bug: add missing imageItem class and proper styling to all image elements
1 parent bbf3e5f commit 87155e3

1 file changed

Lines changed: 16 additions & 16 deletions

File tree

‎index.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1237,33 +1237,33 @@ <h4 style="margin-left: -3px">Word Property</h4>
12371237
.append("<div><span class='label label-default' style='margin-left: -2px; background-color:#665d91;color: lightgrey;'>" + "人脸表情" + "</span><br></div>")
12381238

12391239
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1240-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1240+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
12411241
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "1.png" + "' ";
1242-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1242+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
12431243
$("#faceImageContainer1").append(e);
12441244
}
12451245

12461246
$("#tag1").append("<br>");
12471247
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1248-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1248+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
12491249
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "2.png" + "' ";
1250-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1250+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
12511251
$("#faceImageContainer2").append(e);
12521252
}
12531253

12541254
$("#tag2").append("<br>");
12551255
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1256-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1256+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
12571257
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "6.png" + "' ";
1258-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1258+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
12591259
$("#faceImageContainer3").append(e);
12601260
}
12611261

12621262
$("#tag3").append("<br><div><span class='label' style='margin-left: -2px; background-color:#944b4b;color: lightgrey;'>" + "社交媒体表情" + "</span><br></div>")
12631263
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1264-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1264+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
12651265
e += "./assets/images/social-media-emotions/" + IMAGE_CATEGORIES[i] + "1.jpg" + "' ";
1266-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1266+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
12671267
$("#emojiImageContainer").append(e);
12681268
}
12691269

@@ -1307,33 +1307,33 @@ <h4 style="margin-left: -3px">Word Property</h4>
13071307
.append("<div><span class='label label-default' style='margin-left: -2px; background-color:#665d91;color: lightgrey;'>" + "人脸表情" + "</span><br></div>")
13081308

13091309
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1310-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1310+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
13111311
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "1.png" + "' ";
1312-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1312+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
13131313
$("#faceImageContainer1").append(e);
13141314
}
13151315

13161316
$("#tag1").append("<br>");
13171317
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1318-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1318+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
13191319
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "2.png" + "' ";
1320-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1320+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
13211321
$("#faceImageContainer2").append(e);
13221322
}
13231323

13241324
$("#tag2").append("<br>");
13251325
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1326-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1326+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
13271327
e += "./assets/images/human-face-emotions/" + IMAGE_CATEGORIES[i] + "6.png" + "' ";
1328-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1328+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
13291329
$("#faceImageContainer3").append(e);
13301330
}
13311331

13321332
$("#tag3").append("<br><div><span class='label' style='margin-left: -2px; background-color:#944b4b;color: lightgrey;'>" + "社交媒体表情" + "</span><br></div>")
13331333
for (let i = 0; i < IMAGE_CATEGORIES.length; i++) {
1334-
e = "<li style='display: inline-block; width:57px; text-align:left; list-style:none;'><img src='";
1334+
e = "<li style='display: inline-block; width:60px; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; text-align:left; list-style:none;'><img src='";
13351335
e += "./assets/images/social-media-emotions/" + IMAGE_CATEGORIES[i] + "1.jpg" + "' ";
1336-
e += "class='img-responsive img-thumbnail' alt='Responsive image' style='padding:2px; width: 55px; height: 55px;'></li>";
1336+
e += "class='img-responsive img-thumbnail imageItem' alt='Responsive image' style='position:relative; margin:1px 0px; padding:2px; width: 55px; height: 55px;'></li>";
13371337
$("#emojiImageContainer").append(e);
13381338
}
13391339

0 commit comments

Comments
 (0)