css 在HTML中更改卡片的宽度

yizd12fk 于 2023-05-30 发布在其他

关注(0)|答案(3)|浏览(147)

我是一个HTML初学者，我正在制作我的第一个网站。

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff width=500;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

正如您所看到的，当它运行时，代码显示了一张几乎横跨整个页面宽度的卡片。不过，我觉得这有点丑。有没有一种方法可以让卡片只在页面的50%或60%上伸展？或者，如果这是不可能的，使一组数量的像素？
先谢谢你了。

css

来源：https://stackoverflow.com/questions/47210959/change-width-of-a-card-in-html

3条答案

按热度按时间

pzfprimi1#

你只是在宽度值中缺少了单位，所以你必须这样做：

width: 500px;

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500px;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

如果你想要50%，你必须简单地使它成为width:50%，你可以添加margin:auto用于居中

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 50%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp</p>
  </div>
</div>

赞(0）回复(0）举报 2023-05-30

ctehm74n2#

对于center此卡，请在您的.card部分使用此代码：