Saya baru dalam HTML dan saya telah cuba mencipta tapak web untuk rakan saya di mana saya membuat kad untuk memaparkan maklumat. Memandangkan saya telah membuat berbilang kad dalam bahagian yang berbeza, saya ingin menjajarkan semua kad dalam bahagian masing-masing, tetapi saya menghadapi masalah.
Mula-mula, saya mencuba blok sebaris kerana saya meneka bahawa semua elemen yang ditambah sepatutnya menjadi satu blok, tetapi tiada apa yang berlaku. Seterusnya, saya cuba mencipta jadual dan menyenaraikan kad dalam jadual, tetapi itu juga tidak berjaya. Ia sebahagiannya berjaya, tetapi kad lain telah mengecil dan teks melimpah. Bagaimana saya boleh membetulkannya?
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #fafafa;
color: rgb(32, 32, 32);
margin: 0;
}
header {
position: sticky;
top: 0px;
}
nav {
background-color: #fafafa;
margin: 0;
width: 100%;
}
ul {
text-align: center;
}
li {
display: inline-flex;
text-align: center;
}
a {
float: right;
list-style-type: none;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: #fafafa;
padding: 40px;
}
a:hover {
float: right;
list-style-type: none;
text-decoration: none;
transition-duration: 0.8s;
font-size: 25px;
}
.Fcard1 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 16%;
margin-left: 32px;
}
.Fcard1:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.FCcontainer1 {
padding: 2px 16px;
}
.Fcard2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 16%;
margin-left: 32px;
}
.Fcard2:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.FCcontainer2 {
padding: 2px 16px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- link rel="stylesheet" href="/Home/Home.css" -->
</head>
<body>
<header>
<nav>
<ul>
<li>
<h2>Shoppables</h2>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Settings</a></li>
<li></li>
<li>
<a href="#"><img src="/Home/Home-Images/search_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
<li>
<a href="#"><img src="/Home/Home-Images/shopping_cart_FILL0_wght400_GRAD0_opsz24.png"></a>
</li>
</ul>
</nav>
</header>
<main>
<table style="width: 100%;">
<tr>
<section class="Featured-Sect">
<h2 class="Featured-Header" style="margin: 32px;">Featured Products:</h2>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>rrreee.00 USD</p>
</div>
</div>
</td>
<td style="width: 100%;">
<div class="Fcard1">
<img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%">
<div class="FCcontainer1">
<h2><b>Placeholder</b></h2>
<p>rrreee.00 USD</p>
</div>
</div>
</td>
</tr>
</section>
</section>
</table>
</main>
</body>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cuba letakkan mereka dalam div class="input-group":
<div class="input-group"> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>rrreee.00 USD</p> </div> </div> </td> <td style="width: 100%;"> <div class="Fcard1"> <img src="/Home/Home-Images/Placeholder128.png" alt="Avatar" style="width:100%"> <div class="FCcontainer1"> <h2><b>Placeholder</b></h2> <p>rrreee.00 USD</p> </div> </div> </td></div>