时间戳

首页 > 解决方案 > 为什么 PC 浏览器读取 HTML/CSS 页面的方式与 iPad 不同？

html - 为什么 PC 浏览器读取 HTML/CSS 页面的方式与 iPad 不同？

问题描述

我正在创建一个住宅客户调查。我使用 HTML/CSS 创建了一个网页，并在打开 iPad 视图的情况下在 Chrome 上预览了该过程。

这是我的 Chrome 屏幕： https ://i.imgur.com/gPM7gvp.png

这是我的 iPad 屏幕： https ://i.imgur.com/2gB01uj.jpg

这是我的代码：

 <div class="slider-form"> 
          <h2 style="text-align: center; margin-top: 5%; ">Overall 
 Satisfaction Rating</h2>
          <br> 
          <p style="float:left; margin-left: 20px; padding-right: 70px; 
 padding-top: 29px; 
          font-weight: 500; font-size: 20px;"> Your unit/home? </p>

          <div id="rs1" style="overflow: hidden;" class="rating_scale">

            <label >
              <input type="radio" name="unit" value="1" /><span><img 
 class="smiley" src="img/1.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="2" /><span><img 
 class="smiley" src="img/2.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="3" /><span><img 
 class="smiley" src="img/3.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="4" /><span><img 
 class="smiley" src="img/4.png"></span>
            </label>
            <label >
              <input type="radio" name="unit" value="5" /><span><img 
 class="smiley" src="img/5.png"></span>
            </label>
          </div>

          <p style="float:left; margin-left: 20px; padding-top: 29px; 
          font-weight: 500; font-size: 20px;"> Your property/building? 
 </p>

          <div id="rs1" style="overflow: hidden;" class="rating_scale">
            <label >
              <input type="radio" name="building" value="1" /><span><img 
 class="smiley" src="img/1.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="2" /><span><img 
 class="smiley" src="img/2.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="3" /><span><img 
 class="smiley" src="img/3.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="4" /><span><img 
 class="smiley" src="img/4.png"></span>
            </label>
            <label >
              <input type="radio" name="building" value="5" /><span><img 
 class="smiley" src="img/5.png"></span>
            </label>
          </div>

标签： htmlcss

解决方案

我使用flex方法解决了这个问题。我将所有左侧段落和右侧无线电输入放入一个 div 容器中。并为他们分配了一个班级和ID。其余的只是CSS flex方法。

.container{
 display: flex;
 }
 .left {
 flex: 2;
 text-align: left;
 }
 .right{
 flex: 1;
 }

谢谢你们的快速回答。

推荐阅读