React/CSS：为什么我的 <p> 标签在移动设备上移动它的父 <div>？

Question

我正在编写一个移动优先的 React 应用程序。我的 div 对齐在 Firefox Dev Tools iPhone 屏幕上似乎是正常的，但是当我启动我的应用程序时，对齐是不稳定的。似乎是由于 <p> 元素的高度或其行数。我知道这一点，因为它也发生在 PC 上，但我通过将 p 元素设置为固定高度来修复它。如果有人对它发生的原因有任何想法，如果有解决办法，请告诉我，我们将不胜感激！

这是iPhone手机的截图： iphone mobile frontend

这是 Mozilla Firefox Webdev 工具上的 PC 截图： PC Mozilla Firefox

这是我的 CSS：

.card {
    background-color: #ffffff;
    width: 110px;
    height: 110px;
    border-radius: 15px;
    border: solid 3px #dddddd;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: inline-block;
    margin: 10px 10px;
}

.card:hover{
    border: outset 4px #dddddd;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
    cursor: grab;
}

.card:active{
    cursor: grabbing;
}

.card img{
    margin-left: auto;
    margin-right: auto;
    margin-top:10%; 
    width: 50%;
    height: 50%;
}

.card span{
    background-color:limegreen;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

.card-p{
    width: 80%;
    height: 40px;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    color: #45505c;
    margin: 0 auto;
    font-size: 75%;
    overflow: hidden;
}

.card-container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;

  }

.container{
    margin-top: 50px;
    width: 80%;
}

.container h2{
    text-align: center;
    font-size: 1.5em;
    color: rgb(255, 255, 255);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

这是我的 React JSX

  return (
    <div className='container'>
      <h2>{props.questionData.question}</h2>
      <div className='card-container'>
        {
          props.questionData.options.map((option,index)=>(            
          <div className={'card'} onClick={()=>handleClick(props.questionData.question,option.text)}  key={index}>
          <img src={option.iconPath} alt='icon'/>
          <p className='card-p'>{option.text}</p>
      </div>))
        }
      </div>
    </div>
  );

编辑：人们要求纯 html，这里它是从 Firefox 检查元素复制的...还在同一个 sn-p 中包含样式表。提前致谢！

.card {
    background-color: #ffffff;
    width: 110px;
    height: 110px;
    border-radius: 15px;
    border: solid 3px #dddddd;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: inline-block;
    margin: 10px 10px;
}

.card:hover{
    border: outset 4px #dddddd;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
    cursor: grab;
}

.card:active{
    cursor: grabbing;
}

.card img{
    margin-left: auto;
    margin-right: auto;
    margin-top:10%; 
    width: 50%;
    height: 50%;
}

.card span{
    background-color:limegreen;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

.card-p{
    width: 80%;
    height: 40px;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    color: #45505c;
    margin: 0 auto;
    font-size: 75%;
    overflow: hidden;
}

.card-container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;

  }

.container{
    margin-top: 50px;
    width: 80%;
}

.container h2{
    text-align: center;
    font-size: 1.5em;
    color: rgb(255, 255, 255);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

<div class="container">
  <h2>Great! What type of property are you refinancing?</h2>
  <div class="card-container">
    <div class="card">
      <img src="/static/media/0-1.400fe52e.svg" alt="icon">
      <p class="card-p">Single Family Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-2.f2e4dfe1.svg" alt="icon">
      <p class="card-p">Town Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-3.bc78fdb6.svg" alt="icon">
      <p class="card-p">Condominium</p>
    </div>
    <div class="card">
      <img src="/static/media/0-4.5d3ec9ae.svg" alt="icon">
      <p class="card-p">Multi Family Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-5.7a491458.svg" alt="icon">
      <p class="card-p">Manufactured or Mobile Home</p>
    </div>
  </div> 
</div>

Answer 1

问题是您使用的是inline-block 卡片。

由于有两行文本，inline-block 元素排列在文本的基线上。您会注意到文本的底行与较高的文本对齐。

一个简单的解决方法是将这些行添加到您的.card-container

.card-container {
    ...
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

flex 容器的子项的显示模式被忽略。如果您采用此解决方案，您可以从.card 中删除display: inline-block。

关于inline-block 还有一点需要注意的是它不会忽略空格。当使用inline-block元素时，这两个sn-ps会产生不同的结果。

.box {
  display: inline-block;
  background: #ccc;
  width: 32px;
  height: 32px;
}

<div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div>
  <div class="box"></div><div class="box"></div>
</div>