html - 100% 宽度超出父元素

Question

我正在使用 HTML 和 CSS 编写卡片式按钮的代码。

由于某些原因，图像下方文本的宽度 总是超出父级div 的边缘。

我可以调整以使其在桌面上查看时相对不明显，但在移动设备上查看时却变得非常痛苦。

.card {
  width: 20%;
  box-shadow: 0px 0px 10px gray;
}
.card:hover {
  box-shadow: 0px 0px 20px black;
}
.card-img {
  width: 100%;
}
.card-title {
  margin: 10px;
  display: inline-block;
  font-family: Open Sans;
  text-align: center;
  width: 100%;
}

<div class="card">
  <img class="card-img" src="http://prww-weather.com/logo.png" />
  <p class="card-title">Card Title</p>
</div>

有谁知道为什么 card-title 超出了 card 的边缘，我该如何修复它？

我认为它与分配给 card-title 类的 inline-block 有关，但如果我不包括它， card-title 和 card-img 的 margin 崩溃。

Answer 1

你可以试试这个:

https://jsfiddle.net/nbLLgx5x/

.card {
    width: 20%;
    box-shadow: 0px 0px 10px gray;
}

.card:hover {
    box-shadow: 0px 0px 20px black;
}

.card-img {
    width: 100%;
    display: block;
}

.card-title {
    padding: 10px;
    font-family: Open Sans;
    text-align: center;
    margin: 0;
}

<div class="card">
    <img class="card-img" src="http://prww-weather.com/logo.png" />
    <p class="card-title">This is a very long card title</p>
</div>