Question

我有这些文本框，

在浏览器最大化时看起来很好但在移动设备中或缩小后面的文本框与上面的文本框重叠。

我使用以下语法：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <center>
    <div class="mrQuestionText">
      <style>
        .mrNext {
          min-width: 15em
        }
      </style>
      <div class="mrInstruct"></div>
      <table class="mrQuestionTable" role="presentation">
        <tbody>
          <tr class="odd">
            <th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
            <td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
          </tr>
          <tr class="even">
            <th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
            <td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
          </tr>
        </tbody>
      </table>
    </div>
  </center>
</body>

</html>

＆＃13;

道歉，因为我无法分享完整的语法。

请告知我是否应该添加/更新任何属性。

Answer 1

您需要在媒体查询中的td元素上使用填充。 HTML

<table class="mrQuestionTable" role="presentation">
        <tbody>
          <tr class="odd">
            <td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
            <td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
          </tr>
          <tr class="even">
            <td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
            <td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
          </tr>
        </tbody>
      </table>

CSS

@media only screen and (min-width: 320px) and (max-width: 768px){
    .mrQuestionTable tbody tr td {
      padding-bottom: 1em;
    }
}

Answer 2

尝试为表格添加以下内容

border-spacing: 5px (spacing u wish)

Answer 3

我已更新您的代码，您在这里错过了分号min-width: 15em。您还需要重新构建代码。

由于我无法重现此问题，建议您使用以下更新的样式。我在下面使用border-spacing，试试。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>
    .mrNext {
      min-width: 15em;
    }
    
    .mrQuestionTable {
      border-collapse: separate;
    }
    .mrQuestionTable tr{
      border-spacing: 10px;
    }
    
    
  </style>
</head>

<body>
  <center>
    <div class="mrQuestionText">
      <div class="mrInstruct"></div>
      <table class="mrQuestionTable" role="presentation">
        <tbody>
          <tr class="odd">
            <th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
            <td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
          </tr>
          <tr class="even">
            <th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
            <td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
          </tr>
        </tbody>
      </table>
    </div>
  </center>
</body>

</html>

＆＃13;

Answer 4

您为第1列添加white-space: nowrap; 和th - 只能在thead部分

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <center>
    <div class="mrQuestionText">
      <style>
        .mrGridCategoryText{white-space: nowrap;}
        .mrNext {
          min-width: 15em;
        }
      </style>
      <div class="mrInstruct"></div>
      <table class="mrQuestionTable" role="presentation">
        <tbody>
          <tr class="odd">
            <td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
            <td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
          </tr>
          <tr class="even">
            <td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
            <td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
          </tr>
        </tbody>
      </table>
    </div>
  </center>
</body>

</html>

＆＃13;

移动时文本框重叠

4 个答案: