Question

我有一个非常简单的表，可以设法在chrome和firefox的桌面版本中找到我想要的表：

浏览器输出：

但是，当我在移动设备上查看时，它看起来像这样：

移动输出：

（我在两个元素之间加上了边框，这样我就可以看到div的去处，等等。

这是我相关的HTML：

  <div id="title">My Secret Diary.</div> 
    
  <div id="container">
    
    <?php if ($errorMsg){echo "<div id='errorMsg'>".($errorMsg)."</div>";} ?>
                
        <form id="newUserForm" method="POST">
            
            <input type="text" name="email" placeholder="Enter email."><br>
            
            <input type="text" name="password" placeholder="Enter password."><br>
            
            <div class="formDiv">
                           
              <input type='hidden' name='signUp' value=1>
                        
              <button type="submit" value="submit">Sign Up!</button>
                
              <input type="checkbox" name="rememberUser" value =1>Remember me.<br>
            
              <div id="newToggle">(Already registered? Click here)</div>
                
            </div>

        </form>
        
        <form id="logUserForm" method="POST">
            
            <input type="text" name="email" placeholder="Enter email."><br>
            
            <input type="text" name="password" placeholder="Enter password."><br>
            
            <div class="formDiv">
            
              <input type='hidden' name='signUp' value=0>
            
              <button type="submit" value="submit">Log in!</button>
                
              <input type="checkbox" name="rememberUser" value=1>Remember me.<br>
            
              <div id="logToggle">(New user? Click here)</div>
            
             </div>
                
        </form>
    
  </div>

这是我的相关CSS：

#title{
    font-family: 'Gaegu', cursive;
    font-size: 500%;
    width:  1000px;
    height: 200px;
    color:mediumpurple;
    margin:auto;
    text-align: center;
    padding-top: 50px;
    border: black solid 1px;
}

#container{
    margin:auto;
    width:500px;
    padding-top: 50px;
    border: solid 1px blue;
}
   
.formDiv{
    text-align: center;
}

非常感谢任何帮助！

Answer 1

基本上，您想让div响应（以使其在移动设备中居中），请尝试使用@media规则

@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多内容，例如：

1-视口的宽度和高度

2-设备的宽度和高度

3方向（平板电脑/手机处于横向还是纵向模式？）分辨率

尝试使用媒体查询技术更改文本和视频的大小，对媒体规则css进行一些研究，以使布局具有响应性。

Answer 2

对于我来说，我通常通过将不包装在移动设备中但集中在笔记本电脑中的标签内的分隔部分包裹起来来解决此类问题

像这样：

<div id="title">
    My Secret Diary.
</div>
<center>
    <div id="container">

    <?php if ($errorMsg){echo "<div id='errorMsg'>".($errorMsg)."</div>";} ?>

    <form id="newUserForm" method="POST">

      <input type="text" name="email" placeholder="Enter email."><br>

      <input type="text" name="password" placeholder="Enter password."><br>

      <div class="formDiv">

        <input type='hidden' name='signUp' value=1>

        <button type="submit" value="submit">Sign Up!</button>

        <input type="checkbox" name="rememberUser" value =1>Remember me.<br>

        <div id="newToggle">(Already registered? Click here)</div>

      </div>

  </form>

  <form id="logUserForm" method="POST">

      <input type="text" name="email" placeholder="Enter email."><br>

      <input type="text" name="password" placeholder="Enter password."><br>

      <div class="formDiv">

        <input type='hidden' name='signUp' value=0>

        <button type="submit" value="submit">Log in!</button>

        <input type="checkbox" name="rememberUser" value=1>Remember me.<br>

        <div id="logToggle">(New user? Click here)</div>

       </div>

  </form>
 </div>
</center>

希望可以解决您的问题

台式机和移动显示器与DIVS不同

2 个答案: