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

Posted 2023-03-06

【中文标题】React/CSS：为啥我的 <p> 标签在移动设备上移动它的父 <div>？

【英文标题】：React/CSS: why does my <p> tag move its parent <div> on mobile?React/CSS：为什么我的 <p> 标签在移动设备上移动它的父 <div>？

【发布时间】：2021-08-08 05:03:40

【问题描述】：

我正在编写一个移动优先的 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" >
      <p class="card-p">Single Family Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-2.f2e4dfe1.svg" >
      <p class="card-p">Town Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-3.bc78fdb6.svg" >
      <p class="card-p">Condominium</p>
    </div>
    <div class="card">
      <img src="/static/media/0-4.5d3ec9ae.svg" >
      <p class="card-p">Multi Family Home</p>
    </div>
    <div class="card">
      <img src="/static/media/0-5.7a491458.svg" >
      <p class="card-p">Manufactured or Mobile Home</p>
    </div>
  </div> 
</div>

【问题讨论】：

minimal reproducible example 是否有机会使用 react 呈现的 html？

你能发布一个渲染 HTML 的 sn-p 而不是 React 代码吗？

可能是屏幕宽度的结果。 Mozilla devtools 手机的宽度似乎比您的手机大。尝试使用 devtools 缩小屏幕宽度，看看是否会重现问题。

@JoeJohnson 是的，它响应迅速，当我减小宽度时，它会从您看到的 2 列折叠到 1 列

@JonP 完成，检查一下

【参考方案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>

【讨论】：

这已解决，谢谢！